# 按钮组件
# 使用方法
# 设置颜色样式
点击查看代码
<VueButton>普通按钮</VueButton>
<VueButton colorType="primary">主色</VueButton>
<VueButton colorType="danger">报错</VueButton>
<VueButton colorType="info">信息</VueButton>
<VueButton colorType="success">成功</VueButton>
<VueButton colorType="warning">警告</VueButton>
<VueButton colorType="attention">注意</VueButton>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 设置图标与图标位置
点击查看代码
<VueButton icon="left">默认左侧图标</VueButton>
<VueButton icon="right" iconPosition="right">设置图标在右侧</VueButton>
1
2
2
# 设置尺寸
点击查看代码
<VueButton size="small" icon="download">小尺寸按钮</VueButton>
<VueButton>普通按钮</VueButton>
<VueButton size="big" icon="thumbs-up">大尺寸按钮</VueButton>
1
2
3
2
3
# 设置禁用状态
点击查看代码
<VueButton isDisabled="true"> </VueButton>
1
# 设置加载中状态
点击查看代码
<template>
<VueButton :isLoading="true" icon="loading"></VueButton>
<VueButton :isLoading="isLoading"
icon="download"
@click="isLoading = !isLoading">
点击后显示加载中
</VueButton>
</template>
<script>
import VueButton from '@/components/button/VueButton.vue';
export default {
components: {
VueButton
},
data() {
return {
isLoading: false
}
}
}
</script>
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
# 按钮组
点击查看代码
<VueButtonGroup>
<VueButton icon="left">上一页</VueButton>
<VueButton icon="settings">更多</VueButton>
<VueButton icon="right"
icon-position="right">下一页
</VueButton>
</VueButtonGroup>
1
2
3
4
5
6
7
2
3
4
5
6
7
WARNING
VueButtonGroup的子元素应该全是VueButton元素,否则会有警告提示。
# 属性列表 Attributes Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| isLoading | 加载中状态 | boolean | true/false | false |
| isDisabled | 禁用状态 | boolean | true/false | false |
| colorType | 设置颜色 | string | normal/primary/warning/danger/info/success/ attention | normal |
| size | 设置尺寸 | string | small/normal/big | normal |
| icon | 设置图标 | string | settings/loading/right/left/download/arrow-down/thumbs-up | "" |
| iconPosition | 设置图标位置 | string | left/right | left |