Element el-button 按钮组件的使用详解
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了Element el-button 按钮组件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
1. 背景
按钮是很常用的，Element的按钮功能还是比较全面的，本篇就来介绍下。
先看下各种按钮的效果图：
在分析源码前，我们先来看一下官方文档对于button的使用说明：
2. 按钮分类
el-button按钮的分类基本是靠颜色区分的，另外还有一种文本按钮type="text"，文本按钮由于比较小，比较适合用于表格每行的操作栏部分。
按钮分类：
<el-button>默认</el-button> <el-button type="primary">primary</el-button> <el-button type="success">success</el-button> <el-button type="info">info</el-button> <el-button type="warning">warning</el-button> <el-button type="danger">danger</el-button> <el-button type="text">text</el-button>
3. 按钮样式
Element提供了朴素按钮、圆角按钮、圆形按钮，需要注意的是圆形按钮一般只放一个图标进去，代码如下：
按钮样式：
<el-button type="primary" plain>朴素按钮</el-button> <el-button type="primary" round>圆角按钮</el-button> <el-button type="primary" circle icon="el-icon-search"></el-button>
4. 按钮状态
按钮状态其实就是HTML标准的功能，通过disabled实现禁用即可。
按钮状态：
<el-button type="primary">正常</el-button> <el-button type="primary" disabled>禁用</el-button>
5. 按钮分组
按钮分组很好用，像常见的分页按钮，分成一组的话更加好看，通过<el-button-group>将按钮包裹起来，即可实现。
按钮分组：
<el-button-group> <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button> <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> </el-button-group>
6. 按钮尺寸
饿了提供了默认、中、小、很小四种尺寸，代码如下：
按钮的尺寸：
<el-button>默认</el-button> <el-button type="primary" size="medium ">medium</el-button> <el-button type="primary" size="small">small</el-button> <el-button type="primary" size="mini">mini</el-button>
7. 小结
el-button提供的功能已经比较完善了，拿来即可即可。注意不推荐自己定义style来修改默认样式，容易导致外观不统一。
到此这篇关于Element el-button 按钮组件的使用详解的文章就介绍到这了,更多相关Element el-button 按钮组件内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！
上一篇：vue-video-player 断点续播的实现
下一篇：js实现简单商品筛选功能