Appearance
Button 按钮
常用的操作按钮。
基础用法
基础的按钮用法。
vue
<template>
<div class="button-demo">
<c-button>默认按钮</c-button>
<c-button type="primary">主要按钮</c-button>
<c-button type="success">成功按钮</c-button>
<c-button type="info">信息按钮</c-button>
<c-button type="warning">警告按钮</c-button>
<c-button type="danger">危险按钮</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
朴素按钮
朴素按钮同样设置了不同的 type 属性对应的样式（可选值同上），默认为 info。
vue
<template>
<div class="button-demo">
<c-button plain>朴素按钮</c-button>
<c-button type="primary" plain>主要按钮</c-button>
<c-button type="success" plain>成功按钮</c-button>
<c-button type="info" plain>信息按钮</c-button>
<c-button type="warning" plain>警告按钮</c-button>
<c-button type="danger" plain>危险按钮</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
圆角按钮
vue
<template>
<div class="button-demo">
<c-button round>圆角按钮</c-button>
<c-button type="primary" round>主要按钮</c-button>
<c-button type="success" round>成功按钮</c-button>
<c-button type="info" round>信息按钮</c-button>
<c-button type="warning" round>警告按钮</c-button>
<c-button type="danger" round>危险按钮</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
圆形按钮
vue
<template>
<div class="button-demo">
<c-button circle>圆</c-button>
<c-button type="primary" circle>主</c-button>
<c-button type="success" circle>成</c-button>
<c-button type="info" circle>信</c-button>
<c-button type="warning" circle>警</c-button>
<c-button type="danger" circle>危</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
禁用状态
按钮不可用状态。
vue
<template>
<div class="button-demo">
<c-button disabled>默认按钮</c-button>
<c-button type="primary" disabled>主要按钮</c-button>
<c-button type="success" disabled>成功按钮</c-button>
<c-button type="info" disabled>信息按钮</c-button>
<c-button type="warning" disabled>警告按钮</c-button>
<c-button type="danger" disabled>危险按钮</c-button>
</div>
<div class="button-demo" style="margin-top: 20px;">
<c-button plain disabled>朴素按钮</c-button>
<c-button type="primary" plain disabled>主要按钮</c-button>
<c-button type="success" plain disabled>成功按钮</c-button>
<c-button type="info" plain disabled>信息按钮</c-button>
<c-button type="warning" plain disabled>警告按钮</c-button>
<c-button type="danger" plain disabled>危险按钮</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
文字按钮
没有边框和背景色的按钮。
vue
<template>
<div class="button-demo">
<c-button type="text">文字按钮</c-button>
<c-button type="text" disabled>文字按钮</c-button>
</div>
</template>1
2
3
4
5
6
2
3
4
5
6
不同尺寸
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
vue
<template>
<div class="button-demo">
<c-button size="large">大型按钮</c-button>
<c-button>默认按钮</c-button>
<c-button size="small">小型按钮</c-button>
</div>
<div class="button-demo" style="margin-top: 20px;">
<c-button size="large" round>大型按钮</c-button>
<c-button round>默认按钮</c-button>
<c-button size="small" round>小型按钮</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
加载中
点击按钮后进行数据加载操作，在按钮上显示加载状态。
vue
<template>
<div class="button-demo">
<c-button type="primary" loading>加载中</c-button>
<c-button type="primary" :loading="isLoading" @click="handleClick">
{{ isLoading ? "加载中" : "点击加载" }}
</c-button>
</div>
</template>
<script setup>
import { ref } from "vue"
const isLoading = ref(false)
const handleClick = () => {
isLoading.value = true
setTimeout(() => {
isLoading.value = false
}, 2000)
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
双击事件
按钮支持双击事件。
vue
<template>
<div class="button-demo">
<c-button @dblclick="handleDblClick">
双击我 (已双击 {{ dblClickCount }} 次)
</c-button>
</div>
</template>
<script setup>
import { ref } from "vue"
const dblClickCount = ref(0)
const handleDblClick = () => {
dblClickCount.value++
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
图标按钮
点击按钮后进行数据加载操作，在按钮上显示加载状态。
vue
<template>
<div class="button-demo">
<c-button type="danger">
<c-icon size="18"><Alert /></c-icon>
警告
</c-button>
<c-button type="primary">
复制
<c-icon size="18"><CopyOutline /></c-icon>
</c-button>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Button API
Button Attributes
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | large / default / small | default |
| type | 类型 | string | primary / success / warning / danger / info / text | default |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false |
| circle | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
Button Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击事件 | event |
| dblclick | 双击事件 | event |