Button 按钮

常见的操作按钮

基础用法

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

<template>
  <div class="demo-container">
    <sp-button>默认按钮</sp-button>
    <sp-button type="primary">主要按钮</sp-button>
    <sp-button type="success">成功按钮</sp-button>
    <sp-button type="info">信息按钮</sp-button>
    <sp-button type="warning">警告按钮</sp-button>
    <sp-button type="danger">危险按钮</sp-button>
  </div>

  <div class="demo-container">
    <sp-button plain>朴素按钮</sp-button>
    <sp-button type="primary" plain>主要按钮</sp-button>
    <sp-button type="success" plain>成功按钮</sp-button>
    <sp-button type="info" plain>信息按钮</sp-button>
    <sp-button type="warning" plain>警告按钮</sp-button>
    <sp-button type="danger" plain>危险按钮</sp-button>
  </div>

  <div class="demo-container">
    <sp-button round>圆角按钮</sp-button>
    <sp-button type="primary" round>主要按钮</sp-button>
    <sp-button type="success" round>成功按钮</sp-button>
    <sp-button type="info" round>信息按钮</sp-button>
    <sp-button type="warning" round>警告按钮</sp-button>
    <sp-button type="danger" round>危险按钮</sp-button>
  </div>
</template>

禁用状态

使用 disabled: true 定义按钮是否被禁用。

<template>
  <div class="demo-container">
    <sp-button disabled>默认按钮</sp-button>
    <sp-button disabled type="primary">主要按钮</sp-button>
    <sp-button disabled type="success">成功按钮</sp-button>
    <sp-button disabled type="info">信息按钮</sp-button>
    <sp-button disabled type="warning">警告按钮</sp-button>
    <sp-button disabled type="danger">危险按钮</sp-button>
  </div>
  <div class="demo-container">
    <sp-button disabled plain>默认按钮</sp-button>
    <sp-button disabled plain type="primary">主要按钮</sp-button>
    <sp-button disabled plain type="success">成功按钮</sp-button>
    <sp-button disabled plain type="info">信息按钮</sp-button>
    <sp-button disabled plain type="warning">警告按钮</sp-button>
    <sp-button disabled plain type="danger">危险按钮</sp-button>
  </div>
</template>

文字按钮

使用 text: true 设置按钮为链接按钮

<template>
  <div class="demo-container">
    <sp-button text>默认按钮</sp-button>
    <sp-button text type="primary">主要按钮</sp-button>
    <sp-button text type="success">成功按钮</sp-button>
    <sp-button text type="info">信息按钮</sp-button>
    <sp-button text type="warning">警告按钮</sp-button>
    <sp-button text type="danger">危险按钮</sp-button>
  </div>
  <div class="demo-container">
    <sp-button disabled text>默认按钮</sp-button>
    <sp-button disabled text type="primary">主要按钮</sp-button>
    <sp-button disabled text type="success">成功按钮</sp-button>
    <sp-button disabled text type="info">信息按钮</sp-button>
    <sp-button disabled text type="warning">警告按钮</sp-button>
    <sp-button disabled text type="danger">危险按钮</sp-button>
  </div>
</template>

圆角按钮

使用 round: true 设置按钮为链接按钮

<template>
  <div class="demo-container">
    <sp-button round>默认按钮</sp-button>
    <sp-button round type="primary">主要按钮</sp-button>
    <sp-button round type="success">成功按钮</sp-button>
    <sp-button round type="info">信息按钮</sp-button>
    <sp-button round type="warning">警告按钮</sp-button>
    <sp-button round type="danger">危险按钮</sp-button>
  </div>
</template>

调整尺寸

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

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

<template>
  <div class="demo-container">
    <sp-button size="large">Large</sp-button>
    <sp-button size="default">Default</sp-button>
    <sp-button size="small">small</sp-button>
    <sp-button size="large" round>Large</sp-button>
    <sp-button size="default" round>Default</sp-button>
    <sp-button size="small" round>small</sp-button>
  </div>
</template>

图标按钮

在按钮上使用图标，可以使用 preIcon前置 icon 、 sufIcon后置 icon 属性或插槽。

属性：

插槽：

<template>
  <div class="demo-container">
    <span>属性：</span>
    <sp-button type="primary" pre-icon="check">前置图标</sp-button>
    <sp-button type="primary" suf-icon="check">后置图标</sp-button>
    <sp-button type="primary" pre-icon="check" suf-icon="check">
      前后置图标
    </sp-button>
  </div>
  <div class="demo-container">
    <span>插槽：</span>
    <sp-button type="primary">
      前置图标
      <template #preIcon>
        <sp-icon icon="check" />
      </template>
    </sp-button>
    <sp-button type="primary">
      后置图标
      <template #sufIcon>
        <sp-icon icon="check" />
      </template>
    </sp-button>
    <sp-button type="primary">
      <template #preIcon>
        <sp-icon icon="check" />
      </template>
      前后置图标
      <template #sufIcon>
        <sp-icon icon="check" />
      </template>
    </sp-button>
  </div>
</template>
<script setup lang="ts">
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
library.add(faCheck)
</script>

API

属性名	说明	类型	默认值
size	大小	'large'| 'small'	—
type	类型	'' | 'primary'| 'success'| 'warning'| 'danger'| 'info'	-
plain	朴素按钮	boolean	false
round	圆角按钮	boolean	false
circle	圆形按钮	boolean	false
loading	加载中状态	boolean	false
disabled	禁用	boolean	false
pre-icon	前置按钮	string	—
suf-icon	后置按钮	string	—
autofocus	原生 autofocus 属性	boolean	false
native-type	原生 type 属性 type	'button'| 'submit'| 'reset'	button