Button

常用的操作按钮

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<template>
  <ez-button> hello </ez-button>
  <ez-button type="primary"> Primary </ez-button>
  <ez-button type="success"> Success </ez-button>
  <ez-button type="info"> Info </ez-button>
  <ez-button type="warning"> Warning </ez-button>
  <ez-button type="danger"> Danger </ez-button><br /><br />
  <ez-button plain> hello </ez-button>
  <ez-button type="primary" plain> Primary </ez-button>
  <ez-button type="success" plain> Success </ez-button>
  <ez-button type="info" plain> Info </ez-button>
  <ez-button type="warning" plain> Warning </ez-button>
  <ez-button type="danger" plain> Danger </ez-button><br /><br />

  <ez-button round> hello </ez-button>
  <ez-button type="primary" round> Primary </ez-button>
  <ez-button type="success" round> Success </ez-button>
  <ez-button type="info" round> Info </ez-button>
  <ez-button type="warning" round> Warning </ez-button>
  <ez-button type="danger" round> Danger </ez-button><br /><br />

  <ez-button circle> <ez-icon icon="star" /> </ez-button>
  <ez-button type="primary" circle> <ez-icon icon="star" /> </ez-button>
  <ez-button type="success" circle> <ez-icon icon="star" /> </ez-button>
  <ez-button type="info" circle> <ez-icon icon="star" /> </ez-button>
  <ez-button type="warning" circle> <ez-icon icon="star" /> </ez-button>
  <ez-button type="danger" circle> <ez-icon icon="star" /> </ez-button>
</template>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用， 该属性接受一个 Boolean 类型的值。

<template>
  <div>
    <ez-button disabled>Default</ez-button>
    <ez-button type="primary" disabled>Primary</ez-button>
    <ez-button type="success" disabled>Success</ez-button>
    <ez-button type="info" disabled>Info</ez-button>
    <ez-button type="warning" disabled>Warning</ez-button>
    <ez-button type="danger" disabled>Danger</ez-button>
  </div>
</template>

链接按钮

你可以使用 link 属性来定义按钮是否为link状态， 该属性接受一个 Boolean 类型的值。

<template>
  <div>
    <ez-button link>Default</ez-button>
    <ez-button type="primary" link>Primary</ez-button>
    <ez-button type="success" link>Success</ez-button>
    <ez-button type="info" link>Info</ez-button>
    <ez-button type="warning" link>Warning</ez-button>
    <ez-button type="danger" link>Danger</ez-button><br /><br />
    <ez-button link disabled>Default</ez-button>
    <ez-button type="primary" link disabled>Primary</ez-button>
    <ez-button type="success" link disabled>Success</ez-button>
    <ez-button type="info" link disabled>Info</ez-button>
    <ez-button type="warning" link disabled>Warning</ez-button>
    <ez-button type="danger" link disabled>Danger</ez-button>
  </div>
</template>

图标按钮

使用 icon 属性来为按钮添加图标。图标名称请看 fontawesome 官网 https://fontawesome.com/icons。

<template>
  <div class="icon block">
    <ez-button icon="star"> Star ez-button </ez-button>
  </div>
</template>

加载状态按钮

通过设置 loading 属性为 true 来显示正在加载的状态。

<template>
  <div class="loading block">
    <ez-button loading> Loading... </ez-button>
  </div>
</template>

调整尺寸

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性额外配置尺寸，可使用 large和small两种值。

<template>
  <div class="size block">
    <ez-button size="large"> Large </ez-button>
    <ez-button> Default </ez-button>
    <ez-button size="small"> Small </ez-button>
    <ez-button size="large" icon="search"> Large </ez-button>
    <ez-button icon="search"> Default </ez-button>
    <ez-button size="small" icon="search"> Small </ez-button><br /><br />
    <ez-button size="large" round> Large </ez-button>
    <ez-button round> Default </ez-button>
    <ez-button size="small" round> Small </ez-button>
    <ez-button size="large" round icon="search"> Large </ez-button>
    <ez-button round icon="search"> Default </ez-button>
    <ez-button size="small" round icon="search"> Small </ez-button>
  </div>
</template>

Button API

Button Attributes

Name	Description	Type	Default
size	尺寸	enum - 'large'| 'small'	—
type	类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
plain	是否为朴素按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮	boolean	false
loading	是否为加载中状态	boolean	false
disabled	按钮是否为禁用状态	boolean	false
icon	图标组件	string	—
autofocus	原生 autofocus 属性	boolean	false
native-type	原生 type 属性	enum - 'button'| 'submit'| 'reset'	button

Button Slots

插槽名	说明
default	自定义默认内容