# 4.4 多选框（Check box）
用于在一组可选项中进行多项选择时。
# 图标
# 正常
切图大小：20pt * 20pt （实际蓝色部分直径18pt）
# 禁用
正常情况下，不透明度 30%
# 多选框样式
# 应用示例
# dof-checkbox复选框
复选框组件,建议以成组的方式出现，使用dof-checkbox-list
# 实例
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="checkbox"
background-color="#267AFF"
text-color="#ffffff"
:isImage="true"
:left-button="leftButton"
@dofMinibarLeftButtonClicked="back"
right-text="Home"
></dof-minibar>
<scroller>
<title title="dof-checkbox"></title>
<div style="padding-top:32px;padding-left:32px; padding-bottom:20px ">
<text style="font-size:28px;color: #666666;">加湿器 当前选中 {{checkedList.toString()}}</text>
</div>
<dof-checkbox-list :list="list"
:needShowTopBorder="false"
@dofCheckBoxListChecked="CheckBoxClicked">
</dof-checkbox-list>
</scroller>
</div>
</template>
<script>
import { DofMinibar,
DofCheckboxList,
Core } from 'dolphin-weex-ui'
import Title from 'src/_mods/title.vue'
import Category from 'src/_mods/catalog'
const modal = weex.requireModule('modal')
module.exports = {
components: { Title, Category, DofMinibar, DofCheckboxList },
data() {
return {
leftButton:'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/back_white@3x.png',
list: [
{ title: '加湿器', value: 1, tag:'卧室', desc:'自动开关机，调节到合适模式',
itemImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_08@3x.png' },
{ title: '风扇', value: 2, checked: true, tag:'卧室', desc:'自动开关机，调节到合适模式',
itemImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_01@3x.png' },
{ title: '空调', value: 3, tag:'卧室', desc:'自动开关机，调节到合适模式',
itemImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_15@3x.png' },
{ title: '厨热', value: 4, disabled:true, tag:'卧室', desc:'自动开关机，调节到合适模式',
itemImg: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_05@3x.png' }
],
checkedList: [2],
}
},
created() {},
methods: {
CheckBoxClicked(e) {
this.checkedList = e.checkedList;
},
back() {}
},
computed: {},
}
</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
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
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | String | Y | - | checkbox展现的label |
value | [String、Number、Object] | Y | - | checkbox展现的value |
checked | Boolean | N | false | checkbox是否选中 |
disabled | Boolean | N | false | 是否 disabled |
item-img | String | N | - | 覆盖颜色和 icon |
tag | String | N | - | 标题旁边的胶囊按钮 |
desc | String | N | - | 标题下方的描述文本内容 |
has-top-border | Boolean | N | false | 是否显示上边 |
has-bottom-border | Boolean | N | false | 是否显示下边 |
has-sub-top-border | Boolean | N | false | 是否显示上内边 |
has-sub-bottom-border | Boolean | N | true | 是否显示下内边 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
dofCheckBoxListChecked | 多选列表选项点击事件 | e， 参数e返回已选项value信息为{ checkedList } |