Element el-button 按钮组件的使用详解

更新时间：2021年02月01日 10:31:27 作者：熊猫大哥大

这篇文章主要介绍了Element el-button 按钮组件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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 按钮组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中使用echarts的示例
这篇文章主要介绍了vue中使用echarts的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
解决vue处理axios post请求传参的问题
下面小编就为大家分享一篇解决vue处理axios post请求传参的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
详解vue-cli多页面工程实践
本篇文章主要介绍了详解vue-cli多页面工程实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
利用vue写todolist单页应用
有很多关于vue的todolist小程序，这篇文章主要介绍了用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue 修改 data 数据问题并实时显示的方法
今天小编就为大家分享一篇vue 修改 data 数据问题并实时显示的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue动态组件component标签的用法大全
这篇文章主要介绍了Vue动态组件component标签的用法,在Vue中，可以通过component标签的is属性动态指定标签，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能
这篇文章主要介绍了vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能,基于一个新建的Vue3项目上实现，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-01-01
图文详解vue中proto文件的函数调用
这篇文章主要给大家介绍了vue中proto文件函数调用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2021-08-08
浅谈Vue Element中Select下拉框选取值的问题
下面小编就为大家分享一篇浅谈Vue Element中Select下拉框选取值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
分分钟玩转Vue.js组件（二）
这篇文章教大家如何分分钟玩转Vue.js组件,完善了vue.js组件的学习资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03