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


Posted in Javascript onFebruary 01, 2021

1. 背景

按钮是很常用的,Element的按钮功能还是比较全面的,本篇就来介绍下。

先看下各种按钮的效果图:

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

在分析源码前,我们先来看一下官方文档对于button的使用说明:

Element el-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 按钮组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
js实现简单商品筛选功能
Feb 02 #Javascript
如何在现代JavaScript中编写异步任务
Jan 31 #Javascript
ES6的循环与可迭代对象示例详解
Jan 31 #Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 #Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 #Javascript
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
You might like
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python选择排序算法实例总结
2015/07/01 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
举例讲解Python装饰器
2020/12/24 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
专升本自我鉴定
2013/10/10 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
初一新生军训方案
2014/05/22 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技