Button 按钮

按钮用于触发页面操作。VISTA B 直接使用 Element Plus 的 el-button，主按钮颜色改为 HOME VISTA 品牌渐变，圆角统一为 8px。

基础用法

用 type 设置按钮类型。未设置 type 时为默认按钮。

<el-button>Default</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>

朴素按钮

加上 plain 后，按钮背景会变浅。

<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>

圆角按钮

加上 round 后，按钮变为胶囊形。

<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>

圆形图标按钮

圆形按钮只放图标，适合搜索、编辑、删除这类短操作。

<el-button circle>
  <el-icon><Search /></el-icon>
</el-button>
<el-button type="primary" circle>
  <el-icon><Edit /></el-icon>
</el-button>

禁用状态

加上 disabled 后，按钮不能点击。

<el-button disabled>Default</el-button>
<el-button type="primary" disabled>Primary</el-button>
<el-button type="primary" plain disabled>Primary</el-button>

链接按钮

加上 link 后，按钮会显示成文字链接。

<el-button link>Default</el-button>
<el-button type="primary" link>Primary</el-button>
<el-button type="primary" link disabled>Disabled</el-button>

文字按钮

加上 text 后，按钮更轻，适合放在表格操作列或简单工具栏里。

<el-button text>Text</el-button>
<el-button type="primary" text>Primary</el-button>
<el-button type="primary" text bg>With background</el-button>

图标按钮

图标可以和文字一起使用。

<el-button type="primary">
  <el-icon><Edit /></el-icon>
  <span>Edit</span>
</el-button>

<el-button type="primary">
  <span>Upload</span>
  <el-icon><Upload /></el-icon>
</el-button>

按钮组

把多个按钮放进 el-button-group，可表示一组相关操作。

<el-button-group>
  <el-button type="primary">
    <el-icon><ArrowLeft /></el-icon>
    <span>Previous</span>
  </el-button>
  <el-button type="primary">
    <span>Next</span>
    <el-icon><ArrowRight /></el-icon>
  </el-button>
</el-button-group>

加载状态

加上 loading 后，按钮显示加载状态并阻止重复点击。

<el-button type="primary" loading>Loading</el-button>

调整尺寸

按钮支持 large、默认、small 三种尺寸。

<el-button type="primary" size="large">Large</el-button>
<el-button type="primary">Default</el-button>
<el-button type="primary" size="small">Small</el-button>

API

Button 属性

属性	说明	类型	默认值
type	按钮类型	primary / success / warning / danger / info / text	空
size	按钮尺寸	large / default / small	default
plain	是否为朴素按钮	boolean	false
text	是否为文字按钮	boolean	false
bg	文字按钮是否显示背景	boolean	false
link	是否为链接按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载状态	boolean	false
disabled	是否禁用	boolean	false

Button 插槽

插槽	说明
default	按钮内容
loading	自定义加载图标