点我扫二维码，查看demo
# Checkbox 多选框
# 介绍
用于在一组可选项中进行多项选择时。
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { Checkbox } from '@dolphin-iot/ui'
Vue.use(Checkbox);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-checkbox v-model="checked" theme="transparent" text="多选一" @change="onChange"/>
<mx-checkbox v-model="checked" theme="transparent" text="多选二" @change="onChange"/>
</div>
</div>
</div>
<script>
export default {
data() {
return {
checked: false,
}
},
methods: {
onChange(value) {
alert(value)
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
.demo-panel{
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 28px;
}
}
</style>
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
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
# 禁用状态
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-checkbox v-model="checked1" disabled theme="transparent" text="禁用选项一" @change="onChange"/>
<mx-checkbox v-model="checked1" disabled theme="transparent" text="禁用选项二" @change="onChange"/>
</div>
</div>
</div>
<script>
export default {
data() {
return {
checked1: false
}
},
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
.demo-panel{
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 28px;
}
}
</style>
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
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
# 修改图标颜色
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<div class="demo-panel">
<mx-checkbox
v-model="checked2"
theme="transparent"
color="red"
text="图标颜色一"
/>
<mx-checkbox
v-model="checked2"
color="#00CCB8"
theme="transparent"
text="图标颜色二"
>
</mx-checkbox>
</div>
</div>
</div>
</div>
<script>
export default {
data() {
return {
checked2: false,
}
},
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
.demo-panel{
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 28px;
}
}
</style>
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
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
# API
# Prop
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 判断选项当前是否被选中 | boolean | false |
| value | 判断选项当前是否被选中 | boolean | false |
| text | 选项值 | string | - |
| icon | 默认状态下的选项图标 | string | checkbox-checked |
| active-icon | 选中状态下的选项图标 | string | checkbox-unchecked |
| color | 自定义图标颜色 | string | - |
| disabled | 当前选项禁止选择 | boolean | false |
# Events
| 事件名 | 说明 | 回调函数 |
|---|---|---|
| change | 切换选项时触发 | false |
# Slots
| 名称 | 说明 |
|---|---|
| default | 自定义选项内容 |