Button 按钮
按钮用于开始一个即时操作。
代码演示
<template>
<lay-fieldset legend="主题" simple>
<lay-button type="primary">原始按钮</lay-button>
<lay-button>默认按钮</lay-button>
<lay-button type="normal">百搭按钮</lay-button>
<lay-button type="warm">暖色按钮</lay-button>
<lay-button type="danger">警告按钮</lay-button>
<lay-button disabled>禁用按钮</lay-button>
</lay-fieldset>
<lay-fieldset legend="尺寸" simple>
<lay-button size="lg">大型按钮</lay-button>
<lay-button>默认按钮</lay-button>
<lay-button size="sm">小型按钮</lay-button>
<lay-button size="xs">迷你按钮</lay-button>
<br />
<br />
<lay-button size="lg" type="normal">大型百搭</lay-button>
<lay-button type="warm">大型百搭</lay-button>
<lay-button size="sm" type="danger">小型警告</lay-button>
<lay-button size="xs" disabled>迷你禁用</lay-button>
<br />
<br />
<lay-button block>流体按钮（最大化适应）</lay-button>
<br />
<br />
<lay-button block type="primary">流体按钮（最大化适应）</lay-button>
</lay-fieldset>
<lay-fieldset legend="圆角" simple>
<lay-button type="primary" radius>原始按钮</lay-button>
<lay-button radius>默认按钮</lay-button>
<lay-button type="normal" radius>百搭按钮</lay-button>
<lay-button type="warm" radius>暖色按钮</lay-button>
<lay-button type="danger" radius>警告按钮</lay-button>
<lay-button disabled radius>禁用按钮</lay-button>
<br />
<br />
<lay-button size="lg" type="normal" radius>大型百搭</lay-button>
<lay-button type="warm" radius>大型百搭</lay-button>
<lay-button size="sm" type="danger" radius>小型警告</lay-button>
<lay-button size="xs" disabled radius>迷你禁用</lay-button>
</lay-fieldset>
<lay-fieldset legend="按钮容器" simple>
<lay-button-container>
<button type="button" class="layui-btn">按钮一</button>
<button type="button" class="layui-btn">按钮二</button>
<button type="button" class="layui-btn">按钮三</button>
<button type="button" class="layui-btn">按钮四</button>
<button type="button" class="layui-btn">按钮五</button>
<button type="button" class="layui-btn">按钮六</button>
<button type="button" class="layui-btn">按钮七</button>
<button type="button" class="layui-btn">按钮八</button>
<button type="button" class="layui-btn">按钮九</button>
</lay-button-container>
</lay-fieldset>
<lay-fieldset legend="按钮组" simple>
<lay-button-group>
<lay-button>按钮一</lay-button>
<lay-button>按钮二</lay-button>
<lay-button>按钮三</lay-button>
</lay-button-group>
<lay-button-group size="sm" type="warm">
<lay-button>按钮一</lay-button>
<lay-button>按钮二</lay-button>
<lay-button>按钮三</lay-button>
</lay-button-group>
</lay-fieldset>
<lay-fieldset legend="事件处理" simple>
<lay-button @click="handleClick">点我试试</lay-button>
<lay-button disabled @click="handleClick">点我没反应</lay-button>
</lay-fieldset>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
LayButton,
LayButtonGroup,
LayButtonContainer,
LayFieldset,
} from '../../../src';
export default defineComponent({
components: {
LayButton,
LayButtonGroup,
LayButtonContainer,
LayFieldset,
},
methods: {
handleClick() {
alert('你点击了按钮！');
},
},
setup() {
return {};
},
});
</script>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
API
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|