Button 按钮

常用的操作按钮。

基础用法

基础的按钮用法。

<template>
  <div class="mb-4">
    <my-button>Default</my-button>
    <my-button type="primary"> Primary</my-button>
    <my-button type="success">Success</my-button>
    <my-button type="info">Info</my-button>
    <my-button type="warning">Warning</my-button>
    <my-button type="danger">Danger</my-button>
  </div>
  <div class="mb-4">
    <my-button plain>Plain</my-button>
    <my-button
      plain
      type="primary"
    >
      Primary</my-button
    >
    <my-button
      plain
      type="success"
      >Success</my-button
    >
    <my-button
      plain
      type="info"
      >Info</my-button
    >
    <my-button
      plain
      type="warning"
      >Warning</my-button
    >
    <my-button
      plain
      type="danger"
      >Danger</my-button
    >
  </div>
  <div class="mb-4">
    <my-button>Default</my-button>
    <my-button
      round
      type="primary"
    >
      Round</my-button
    >
    <my-button
      round
      type="success"
      >Success</my-button
    >
    <my-button
      round
      type="info"
      >Info</my-button
    >
    <my-button
      round
      type="warning"
      >Warning</my-button
    >
    <my-button
      round
      type="danger"
      >Danger</my-button
    >
  </div>
  <div class="mb-4">
    <my-button
      circle
      type="primary"
      icon="fa-house"
    >
    </my-button>
    <my-button
      circle
      type="success"
      icon="fa-thumbs-up"
    ></my-button>
    <my-button
      circle
      type="info"
      icon="fa-headphones"
    ></my-button>
    <my-button
      circle
      type="warning"
      icon="fa-user"
    ></my-button>
    <my-button
      circle
      type="danger"
      icon="fa-comment"
    ></my-button>
  </div>
</template>

<style scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。该属性接受一个 Boolean 类型的值。

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

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

<style scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>

加载状态按钮

点击按钮来加载数据，并向用户反馈加载状态。

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

您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标

ps: loading 插槽优先级高于loadingIcon属性、

<template>
  <div>
    <my-button
      type="primary"
      loading
    >
      Loading
    </my-button>
    <my-button
      type="primary"
      loading
      loadingIcon="thumbs-up"
    >
      Loading
    </my-button>
    <my-button
      type="primary"
      loading
      loadingIcon="list-check"
    >
      Loading
    </my-button>
  </div>
</template>

按钮大小

<template>
  <div class="mb-4">
    <my-button size="large">Large</my-button>
    <my-button>Default</my-button>
    <my-button size="small">Small</my-button>
    <my-button
      size="large"
      icon="magnifying-glass"
      >Search
    </my-button>
    <my-button icon="magnifying-glass">Search</my-button>
    <my-button
      size="small"
      icon="magnifying-glass"
      >Search
    </my-button>
  </div>

  <div class="mb-4">
    <my-button
      size="large"
      round
      >Large</my-button
    >
    <my-button round>Default</my-button>
    <my-button
      size="small"
      round
      >Small</my-button
    >
    <my-button
      size="large"
      icon="magnifying-glass"
      round
      >Search
    </my-button>
    <my-button
      icon="magnifying-glass"
      round
      >Search</my-button
    >
    <my-button
      size="small"
      icon="magnifying-glass"
      round
      >Search
    </my-button>
  </div>

  <div class="mb-4">
    <my-button
      size="large"
      icon="magnifying-glass"
      circle
    >
    </my-button>
    <my-button
      icon="magnifying-glass"
      circle
    ></my-button>
    <my-button
      size="small"
      icon="magnifying-glass"
      circle
    >
    </my-button>
  </div>
</template>

<style lang="scss" scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>

Button API

Button Attributes

属性名	类型	默认值	说明
type	`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'`	-	按钮类型
size	`'small' \| 'medium' \| 'large'`	`'medium'`	按钮尺寸
plain	`boolean`	`false`	是否为朴素按钮
round	`boolean`	`false`	是否为圆角按钮
disabled	`boolean`	`false`	是否禁用按钮
circle	`boolean`	`false`	是否为圆形按钮
icon	`string`	-	图标名称
loading	`boolean`	`false`	是否显示加载状态
loadingIcon	`string`	`'spinner'`	加载状态图标名称

Button Slots

名称	说明
default	按钮内容

Button Expose

属性名	说明	类型
ref	按钮的引用	`Ref<HTMLButtonElement>`
size	按钮尺寸	`ButtonSize`
type	按钮类型	`ButtonType`
disabled	是否禁用按钮	`boolean`

注意事项

图标使用基于Font Awesome的实现，需要确保图标已正确注册
加载状态会自动禁用按钮

Button 按钮 ​

基础用法 ​

禁用状态 ​

加载状态按钮 ​

按钮大小 ​

Button API ​

Button Attributes ​

Button Slots ​

Button Expose ​

注意事项 ​