Button 按钮

常用的操作按钮。

基础用法

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

<script lang="ts" setup>
import SiButton from '@/components/Button/Button.vue'
</script>

<template>
  <div>
    <div class="button-row">
      <SiButton>Default</SiButton>
      <SiButton type="primary">
        Primary
      </SiButton>
      <SiButton type="success">
        Success
      </SiButton>
      <SiButton type="info">
        Info
      </SiButton>
      <SiButton type="warning">
        Warning
      </SiButton>
      <SiButton type="danger">
        Danger
      </SiButton>
    </div>
    <div class="button-row">
      <SiButton plain>
        Plain
      </SiButton>
      <SiButton type="primary" plain>
        Primary
      </SiButton>
      <SiButton type="success" plain>
        Success
      </SiButton>
      <SiButton type="info" plain>
        Info
      </SiButton>
      <SiButton type="warning" plain>
        Warning
      </SiButton>
      <SiButton type="danger" plain>
        Danger
      </SiButton>
    </div>
    <div class="button-row">
      <SiButton round>
        Round
      </SiButton>
      <SiButton type="primary" round>
        Primary
      </SiButton>
      <SiButton type="success" round>
        Success
      </SiButton>
      <SiButton type="info" round>
        Info
      </SiButton>
      <SiButton type="warning" round>
        Warning
      </SiButton>
      <SiButton type="danger" round>
        Danger
      </SiButton>
    </div>
  </div>
</template>

<style>
.button-row {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
}
</style>

禁用状态

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

<script lang="ts" setup>
import SiButton from '@/components/Button/Button.vue'
</script>

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

<style>
.button-row {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
}
</style>

不同尺寸

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

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

<script lang="ts" setup>
import SiButton from '@/components/Button/Button.vue'
</script>

<template>
  <div>
    <div class="button-row">
      <SiButton size="large">
        Large
      </SiButton>
      <SiButton>Default</SiButton>
      <SiButton size="small">
        Small
      </SiButton>
    </div>
    <div class="button-row">
      <SiButton size="large" type="primary">
        Large
      </SiButton>
      <SiButton type="primary">
        Default
      </SiButton>
      <SiButton size="small" type="primary">
        Small
      </SiButton>
    </div>
    <div class="button-row">
      <SiButton size="large" type="primary" round>
        Large
      </SiButton>
      <SiButton type="primary" round>
        Default
      </SiButton>
      <SiButton size="small" type="primary" round>
        Small
      </SiButton>
    </div>
  </div>
</template>

<style>
.button-row {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

加载状态

点击按钮后进行数据加载操作，在按钮上显示加载状态。

<script lang="ts" setup>
import SiButton from '@/components/Button/Button.vue'
</script>

<template>
  <div>
    <div class="button-row">
      <SiButton loading>
        Loading
      </SiButton>
      <SiButton type="primary" loading>
        Loading
      </SiButton>
      <SiButton type="success" loading>
        Loading
      </SiButton>
    </div>
  </div>
</template>

<style>
.button-row {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>

自动获取焦点

使用 autofocus 属性来设置按钮自动获取焦点。

<script lang="ts" setup>
import SiButton from '@/components/Button/Button.vue'
</script>

<template>
  <div class="button-row">
    <SiButton autofocus type="success">
      自动获取焦点
    </SiButton>
  </div>
</template>

API

属性

属性名	说明	类型	可选值	默认值
type	按钮类型	string	primary / success / warning / danger	—
size	按钮尺寸	string	large / small	—
plain	是否为朴素按钮	boolean	—	false
round	是否为圆角按钮	boolean	—	false
disabled	是否禁用	boolean	—	false
loading	是否加载中状态	boolean	—	false
autofocus	是否自动获取焦点	boolean	—	false
nativeType	原生 type 属性	string	button / submit / reset	button

插槽

插槽名	说明
default	按钮的内容

事件

事件名	说明	参数
click	点击按钮时触发	(event: MouseEvent)