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中的字符编码转换问题
Jul 07 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
js动态引入的四种方法
May 05 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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
PHP 危险函数解释 分析
2009/04/22 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
javascript 回调函数详解
2014/11/11 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python中__slots__用法实例
2015/06/04 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
大专自我鉴定范文
2013/10/23 职场文书
求职信模版
2013/11/30 职场文书
个人银行贷款担保书
2014/04/01 职场文书
大学生标准自荐书
2014/06/15 职场文书
2014年城管工作总结
2014/11/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
期中考试后的感想
2015/08/07 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL