Button 按鈕

常用的操作按鈕，支持多种类型、尺寸和状态。

基础用法

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

基础的按钮包括普通按钮、主要按钮、成功按钮、警告按钮、危险按钮和信息按钮。通过设置 type 属性可以使用不同样式的按钮。

另外，可以通过 plain 设置朴素按钮，通过 round 设置圆角按钮，通过 circle 和 icon 设置图标圆形按钮。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="demo-button">
    <Button>默认按钮</Button>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="danger">危险按钮</Button>
    <Button type="info">信息按钮</Button>
  </div>

  <div class="demo-button" style="margin-top: 20px">
    <Button plain>朴素按钮</Button>
    <Button type="primary" plain>主要按钮</Button>
    <Button type="success" plain>成功按钮</Button>
    <Button type="warning" plain>警告按钮</Button>
    <Button type="danger" plain>危险按钮</Button>
    <Button type="info" plain>信息按钮</Button>
  </div>

  <div class="demo-button" style="margin-top: 20px">
    <Button round>圆角按钮</Button>
    <Button type="primary" round>主要按钮</Button>
    <Button type="success" round>成功按钮</Button>
    <Button type="warning" round>警告按钮</Button>
    <Button type="danger" round>危险按钮</Button>
    <Button type="info" round>信息按钮</Button>
  </div>

  <div class="demo-button" style="margin-top: 20px">
    <Button icon="search" circle></Button>
    <Button type="primary" icon="edit" circle></Button>
    <Button type="success" icon="check" circle></Button>
    <Button type="warning" icon="star" circle></Button>
    <Button type="danger" icon="trash-can" circle></Button>
    <Button type="info" icon="message" circle></Button>
  </div>
</template>

<style>
.demo-button .vk-button {
  margin-right: 10px;
}
</style>

禁用状态

按钮不可用状态，通过 disabled 属性指定。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="demo-button">
    <Button disabled>默认按钮</Button>
    <Button type="primary" disabled>主要按钮</Button>
    <Button type="success" disabled>成功按钮</Button>
    <Button type="warning" disabled>警告按钮</Button>
    <Button type="danger" disabled>危险按钮</Button>
    <Button type="info" disabled>信息按钮</Button>
  </div>
  <div class="demo-button" style="margin-top: 20px">
    <Button plain disabled>朴素按钮</Button>
    <Button type="primary" plain disabled>主要按钮</Button>
    <Button type="success" plain disabled>成功按钮</Button>
    <Button type="warning" plain disabled>警告按钮</Button>
    <Button type="danger" plain disabled>危险按钮</Button>
    <Button type="info" plain disabled>信息按钮</Button>
  </div>
</template>

<style>
.demo-button .vk-button {
  margin-right: 10px;
}
</style>

不同尺寸

Button 组件提供了不同的尺寸，可以在不同场景下选择合适的按钮尺寸。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="demo-button">
    <Button size="large">大型按钮</Button>
    <Button>默认按钮</Button>
    <Button size="small">小型按钮</Button>
  </div>
  <div class="demo-button" style="margin-top: 20px">
    <Button size="large" type="primary">大型按钮</Button>
    <Button type="primary">默认按钮</Button>
    <Button size="small" type="primary">小型按钮</Button>
  </div>
</template>

<style>
.demo-button .vk-button {
  margin-right: 10px;
}
</style>

图标按钮

带图标的按钮可以增强按钮的可识别性，添加图标让按钮更具吸引力。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="demo-button">
    <Button icon="search">搜索</Button>
    <Button icon="edit" type="primary">编辑</Button>
    <Button icon="check" type="success">确认</Button>
    <Button icon="message" type="info">消息</Button>
    <Button icon="trash-can" type="danger">删除</Button>
    <Button icon="star" type="warning">收藏</Button>
  </div>
  <div class="demo-button" style="margin-top: 20px">
    <Button icon="search" circle></Button>
    <Button icon="edit" type="primary" circle></Button>
    <Button icon="check" type="success" circle></Button>
    <Button icon="message" type="info" circle></Button>
    <Button icon="trash-can" type="danger" circle></Button>
    <Button icon="star" type="warning" circle></Button>
  </div>
</template>

<style>
.demo-button .vk-button {
  margin-right: 10px;
}
</style>

加载状态

通过添加 loading 属性可以让按钮处于加载状态，此时按钮不可点击。

<script setup>
import { ref } from 'vue'
import Button from '@/components/Button/Button.vue'

const isLoading = ref(false)

const handleClick = () => {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
  }, 2000)
}
</script>
<template>
  <div class="demo-button">
    <Button loading>加载中</Button>
    <Button type="primary" loading>加载中</Button>
    <Button type="success" loading>加载中</Button>
  </div>
  <div class="demo-button" style="margin-top: 20px">
    <Button :loading="isLoading" @click="handleClick">点击后加载</Button>
  </div>
</template>

<style>
.demo-button .vk-button {
  margin-right: 10px;
}
</style>

按钮形状

按钮可以有不同的形状，包括圆角和圆形。

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="demo-button">
    <Button round>圆角按钮</Button>
    <Button type="primary" round>主要按钮</Button>
    <Button type="success" round>成功按钮</Button>
    <Button type="warning" round>警告按钮</Button>
    <Button type="trash-can" round>危险按钮</Button>
    <Button type="info" round>信息按钮</Button>
  </div>
  <div class="demo-button" style="margin-top: 20px">
    <Button icon="search" circle></Button>
    <Button icon="edit" type="primary" circle></Button>
    <Button icon="check" type="success" circle></Button>
    <Button icon="message" type="info" circle></Button>
    <Button icon="trash-can" type="danger" circle></Button>
    <Button icon="star" type="warning" circle></Button>
  </div>
</template>

<style>
.demo-button .vk-button {
  margin-right: 10px;
}
</style>

Attributes

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	是否自动获取焦点，同原生 button 的 autofocus	`boolean`	false
native-type	原生 button 的 type 值	`enum` - `'button'\| 'submit'\| 'reset'`	button

Button 插槽

插槽名	说明
default	按钮的内容

Button 按鈕 ​

基础用法 ​

禁用状态 ​

不同尺寸 ​

图标按钮 ​

加载状态 ​

按钮形状 ​

Attributes ​

Button Attributes ​

Button 插槽 ​