Button 按钮
常用的操作按钮。
基础用法
查看代码
vue
<template>
<demo-container>
<div>
<gov-button>默认按钮</gov-button>
<gov-button type="primary">主要按钮</gov-button>
<gov-button type="success">成功按钮</gov-button>
<gov-button type="info">信息按钮</gov-button>
<gov-button type="warning">警告按钮</gov-button>
<gov-button type="danger">危险按钮</gov-button>
</div>
<br />
<div>
<gov-button plain>默认按钮</gov-button>
<gov-button plain type="primary">主要按钮</gov-button>
<gov-button plain type="success">成功按钮</gov-button>
<gov-button plain type="info">信息按钮</gov-button>
<gov-button plain type="warning">警告按钮</gov-button>
<gov-button plain type="danger">危险按钮</gov-button>
</div>
<br />
<div>
<gov-button round>默认按钮</gov-button>
<gov-button round type="primary">主要按钮</gov-button>
<gov-button round type="success">成功按钮</gov-button>
<gov-button round type="info">信息按钮</gov-button>
<gov-button round type="warning">警告按钮</gov-button>
<gov-button round type="danger">危险按钮</gov-button>
</div>
<br />
<div>
<gov-button icon="edit">默认按钮</gov-button>
<gov-button type="primary" icon="edit">主要按钮</gov-button>
<gov-button icon="search" plain circle />
<gov-button type="primary" icon="delete" circle />
<gov-button type="text">文字按钮</gov-button>
</div>
</demo-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
不同尺寸
查看代码
vue
<template>
<demo-container>
<gov-button size="large">大按钮</gov-button>
<gov-button size="default">默认按钮</gov-button>
<gov-button size="small">小按钮</gov-button>
</demo-container>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
禁用状态
查看代码
vue
<template>
<demo-container>
<div>
<gov-button disabled>主要按钮</gov-button>
<gov-button disabled type="success">成功按钮</gov-button>
<gov-button disabled type="info">信息按钮</gov-button>
<gov-button disabled type="warning">警告按钮</gov-button>
<gov-button disabled type="danger">危险按钮</gov-button>
</div>
<br />
<div>
<gov-button disabled plain>主要按钮</gov-button>
<gov-button disabled plain type="success">成功按钮</gov-button>
<gov-button disabled plain type="info">信息按钮</gov-button>
<gov-button disabled plain type="warning">警告按钮</gov-button>
<gov-button disabled plain type="danger">危险按钮</gov-button>
</div>
</demo-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
加载中
操作完毕以后,可以在按钮上显示加载状态。
查看代码
vue
<template>
<demo-container>
<gov-button type="primary" loading>加载中</gov-button>
</demo-container>
</template>
1
2
3
4
5
2
3
4
5
文字按钮
设置 type='text'
时显示文字按钮样式。
查看代码
vue
<template>
<demo-container>
<gov-button type="text">文字按钮</gov-button>
<gov-button type="text" disabled>文字按钮</gov-button>
</demo-container>
</template>
1
2
3
4
5
6
2
3
4
5
6
按钮组
可设置按钮组来组合按钮。
查看代码
vue
<template>
<demo-container>
<gov-button-group>
<gov-button type="primary">按钮组</gov-button>
<gov-button type="primary">按钮组</gov-button>
<gov-button type="success">按钮组</gov-button>
</gov-button-group>
<br />
<br />
<gov-button-group>
<gov-button type="primary" round>按钮组</gov-button>
<gov-button type="primary" round>按钮组</gov-button>
<gov-button type="warning" round>按钮组</gov-button>
</gov-button-group>
<br />
<br />
<gov-button-group>
<gov-button type="primary" icon="user-solid" circle />
<gov-button type="primary" icon="edit" circle>按钮组</gov-button>
<gov-button type="primary" icon="s-tools" circle />
</gov-button-group>
</demo-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Attributes
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 尺寸 | string | large / default / small | — |
type | 类型 | string | primary / success / warning / danger / info / text | — |
label | 按钮文字 | string | - | — |
plain | 是否朴素按钮 | boolean | — | false |
round | 是否圆角按钮 | boolean | — | false |
circle | 是否圆形按钮 | boolean | — | false |
loading | 是否加载中状态 | boolean | — | false |
disabled | 是否禁用状态 | boolean | — | false |
icon | 图标名 | string | — | — |
autofocus | 是否默认聚焦 | boolean | — | false |
native-type | 原生 type 属性 | string | button / submit / reset | — |
Slots
插槽名 | 说明 |
---|---|
default | 用于放置按钮的label文本,可以放置任何自定义的内容,例如文本、图标或其他 HTML 结构。 |
Events
事件名 | 说明 |
---|---|
click | 点击事件。 |