VUE element-ui 之button 按钮简介

element-ui之Button 按钮按钮等可以通过vue绑定属性来控制某一些属性各式各样的按钮&amp;lt;el-button&amp;gt;鼠标滑过/点击背景变淡&amp;lt;/el-button&amp;gt;&amp;lt;el-button type=&quot;primary&

胖蛋蛋

67063人浏览 · 2018-10-26 15:26:15

胖蛋蛋 · 2018-10-26 15:26:15 发布

element-ui之Button 按钮

按钮等可以通过vue绑定属性来控制某一些属性

各式各样的按钮

  <el-button>鼠标滑过/点击背景变淡</el-button>
  <el-button type="primary" plain>鼠标滑过/点击背景变深色调</el-button>
  <el-button type="success" round>圆角按钮</el-button>
  <el-button type="info" icon="el-icon-search" circle>图标按钮按钮，icon放入映入的icon图标名称</el-button>
  <el-button type="text">文字按钮</el-button>
  <el-button disabled>禁用按钮</el-button>
  <el-button size="medium">不同尺寸按钮</el-button>
  <el-button :disabled="true/false">动态禁用</el-button>
  <el-button type="primary">图标加文字按钮<i class="el-icon-upload el-icon--right"></i></el-button>
  <el-button type="primary" :loading="true">加载中按钮</el-button>

组合的按钮,使用—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>

文档说明

参数	说明	类型	可选值	默认值
size	尺寸	string	medium / small / mini	无
type	类型	string	primary / success / warning / danger / info / text	无
plain	是否鼠标滑过/点击背景变深色调	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
loading	是否加载中状态	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标类名	string	—	—

引用element-ui，element-ui地址

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^