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 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
jQuery插件开发汇总
May 15 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python中adb有什么功能
2020/06/07 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Ref与out有什么不同
2012/11/24 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
新闻稿件写作技巧
2015/07/18 职场文书