ElementUI之按钮Button

官方链接地址

https://element.eleme.io/#/zh-CN/component/button

单个按钮

<el-button></el-button>

<el-button>我是一个按钮</el-button>

按钮组

<el-button-group></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>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

按钮样式

• 默认
  • <el-button></el-button>
• 朴素plain
  • <el-button plain></el-button>
• 圆角round
  • <el-button round></el-button>
• 圆形circle
  • <el-button circle></el-button>
• 禁用disabled
  • <el-button disabled></el-button>

<p><el-button>默认按钮</el-button></p>
<p><el-button plain>朴素按钮</el-button></p>
<p><el-button round>圆角按钮</el-button></p>
<p><el-button circle icon="el-icon-delete"></el-button></p>
<p><el-button disabled circle icon="el-icon-delete"></el-button></p>

按钮情境色

按钮情境色使用type属性声明

• primary
  • <el-button type="primary"></el-button>
• success
  • <el-button plain type="success"></el-button>
• info
  • <el-button round type="info"></el-button>
• warning
  • <el-button circle type="warning"></el-button>
• danger
  • <el-button disabled type="danger"></el-button>
• text
  • <el-button type="text"></el-button>

<p><el-button type="primary">默认按钮</el-button></p>
<p><el-button type="success" plain>朴素按钮</el-button></p>
<p><el-button type="info" round>圆角按钮</el-button></p>
<p><el-button type="warning" circle icon="el-icon-edit"></el-button></p>
<p><el-button type="danger">上传<i class="el-icon-upload el-icon--right"></i></el-button></p>
<p><el-button type="text">文字按钮<i class="el-icon-upload el-icon--right"></i></el-button></p>

按钮尺寸

按钮尺寸使用size属性声明

• medium
  • <el-button type="primary" size="medium"></el-button>
• small
  • <el-button plain type="success" size="small"></el-button>
• mini
  • <el-button round type="info" size="mini"></el-button>

<el-row>
	<el-button>默认按钮</el-button>
	<el-button size="medium">中等按钮</el-button>
	<el-button size="small">小型按钮</el-button>
	<el-button size="mini">超小按钮</el-button>
</el-row>

按钮图标

按钮上使用图标，通过icon属性声明

• 用法一：
  • <el-button circel icon="el-icon-delete" type="danger"></el-button>
• 用法二：（放在文字左边）
  • <el-button type="danger" icon="el-icon-delete">删除</el-button>
• 用法三：（放在文字右边）
  • el-icon--right
  • <el-button type="danger">删除<li class="el-icon-delete el-icon--right"></li></el-button>

<p><el-button circle icon="el-icon-delete" type="danger"></el-button></p>
<p><el-button round icon="el-icon-delete" type="danger">左删除</el-button></p>
<p><el-button round type="danger">右删除<i class="el-icon-delete el-icon--right"></i></el-button></p>

按钮loading效果

点击按钮后进行数据加载操作，在按钮上显示加载状态，这样的效果通过loading属性声明

<el-button type="primary" :loading="true">加载中</el-button>

按钮原生动作类别

默认情况下，<el-button />将type渲染成button，可以通过native-type来指定渲染类别

• native-type可接受以下值
  • button
  • submit
  • reset

<p><el-button native-type="button" round type="danger">Do</el-button></p>
<p><el-button native-type="submit" round type="danger">提交</el-button></p>
<p><el-button native-type="reset" round type="danger">重置</el-button></p>

按钮自动聚焦

通过声明autofocus可以让按钮自动聚焦

<el-button size="small" round :autofocus="true">超小按钮</el-button>

属性