VUE element-ui 之button 按钮简介

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地址