# 9.13 选择器（Midea Picker）
组件定义：该组件提供普通 picker、日期 picker 和联动 picker。
# 页面效果
# 示例
<template>
<div class="wrapper row-c">
<midea-picker
class="picker"
ref="single"
:config="pickerConfig"
@mideaPickerChange="onMideaPickerChange"
></midea-picker>
</div>
</template>
<style>
.row-c {
flex-direction: row;
align-items: center;
justify-content: center;
}
.wrapper {
/*width: 750px;*/
flex-direction: column;
justify-content: center;
}
.button {
font-size: 60px;
width: 450px;
text-align: center;
margin-top: 30px;
margin-left: 150px;
padding-top: 20px;
padding-bottom: 20px;
border-width: 2px;
border-style: solid;
color: #666666;
border-color: #DDDDDD;
background-color: #F5F5F5
}
.picker {
width: 686px;
height: 440px;
}
</style>
<script>
const navigator = weex.requireModule('navigator')
export default {
data() {
return {
delayTime: 0,
pickerCF:{},
pickerConfig: {
loop: true,
itemMaps: [],
textColor: '#300001', // 选中的字体颜色
backgroundColor: '#666666', //picker背景色
dividerColor: '#CDCDCD', // 分割线颜色
type: '0', // 0：普通 picker，1：日期 picker，2：联动 picker
value: '2021-03-01', // 如果是时间/日期picker类则传值，格式:"2021-03-01"，普通类型picker无值
selectedRowBgColor:"#00ff00",//当前选中行的背景色。（8.13.0）
wheelList: [
{
index: 0,
isLoop: true,
selectedTextSize: 20,
label: '小时', // 单位名字
labelTextColor: '#121212', //单位颜色
labelTextSize: '14', //单位字体大小
itemList: Array.apply(null, { length: 24 }).map((v, k) => {
return {
id: k,
name: k < 10 ? '0' + k : '' + k,
pid: 0
}
})
},
{
index: 0,
isLoop: true,
selectedTextSize: 20,
label: '分', // 单位名字
labelTextColor: '#121212', //单位颜色
labelTextSize: '14', //单位字体大小
itemList: Array.apply(null, { length: 60 }).map((v, k) => {
return {
id: k,
name: k < 10 ? '0' + k : '' + k,
pid: 0
}
})
},
{
index: 0,
isLoop: true,
selectedTextSize: 20,
label: '秒', // 单位名字
labelTextColor: '#121212', //单位颜色
labelTextSize: '14', //单位字体大小
itemList: Array.apply(null, { length: 60 }).map((v, k) => {
return {
id: k,
name: k < 10 ? '0' + k : '' + k,
pid: 0
}
})
}
]
},
}
},
methods: {
pickCity(){
this.pickerCF = this.pickerConfig;
this.$refs.single.style.background = "#456234";
},
onMideaPickerChange(event) {
console.log(JSON.stringify(event))
if (event.result === 'success') {
let data = event.data
data = typeof data === 'string' ? JSON.parse(data) : data
this.delayTime = parseInt(data[0].name) * 3600 + parseInt(data[1].name) * 60 + parseInt(data[2].name)
}
},
},
created() {
}
}
</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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
# Attributes
提供给前端多个属性控制，包括字体颜色，背景颜色，单位颜色，选中值，滚动数据等，支持单列和多列样式的展示。
<midea-picker>通过传入 config 值来存储所有属性值。示例中的 pickerConfig 是页面变量，实际组件属性名为 config。
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
config | Object | Y | - | 选择器配置，以下属性均置于此对象中 |
普通滚轮默认配置为 textColor: '#000000'、backgroundColor: '#FFFFFF'、itemHeight: '36'。
| Prop | Type | Description |
|---|---|---|
textColor | String | 选中的字体颜色 |
backgroundColor | String | Picker背景色 |
dividerColor | String | 分割线颜色 |
type | String | 0：普通 picker，1：日期 picker，2：联动 picker |
value | String | 如果是日期 picker 类型则传值，格式:"2021-03-01"，其他类型 picker 无值 |
min | String | 如果是日期 picker 类型则传值，格式:"1900-01-01"，其他类型 picker 无值 |
max | String | 如果是日期 picker 类型则传值，格式:"1900-01-01"，其他类型 picker 无值 |
itemHeight | String | 每一列的高度 |
dividerLeftMargin | Number | 分割线左边距（安卓独有） |
dividerRightMargin | Number | 分割线右边距（安卓独有） |
dividerHeight | Number | 分割线高度（安卓独有） |
itemMaps | Array | 联动类型有值，其他类型无值（注 1） |
wheelList | Array | 具体配置的数据，可选值注2 |
# 参数详情：itemMaps（注 1）
| Prop | Type | Description |
|---|---|---|
id | Number | 主键 id |
name | String | 内容 |
pId | Number | 所属父类型 id |
# 参数详情：wheelList（注 2）
默认值：index = 0、isLoop = false、labelEdgeType = 'center'、labelTopEdge = 0、labelLeftEdge = 5。
| Prop | Type | Description |
|---|---|---|
index | Number | 起始滚动的位置，默认位置 |
isLoop | Boolean | 是否循环滚动 |
selectedTextSize | Number | 选中的字体大小 |
selectedTextColor | String | 选中文字颜色 |
selectedTextAlpha | Number | 每列选中行文字透明度（范围 0-1） |
normalTextSize | Number | 正常的字体大小 |
normalTextColor | String | 未选中的文本颜色 |
normalTextAlpha | Number | 其他行文字透明度（范围 0-1） |
label | String | 单位 |
labelTextColor | String | 标签颜色 |
labelTextSize | String | 单位字体大小 |
labelEdgeType | String | top/center/bottom选中单位坐标偏移方向 |
labelTopEdge | Number | 选中单位坐标Y轴偏移距离 |
labelLeftEdge | Number | 选中单位坐标X轴偏移距离 |
ruleList | Array | 每列单位规则（注 3） |
itemList | Array | 具体滚动的每一项注4 |
backgroundColor | String | Picker背景色 |
dividerColor | String | 分割线颜色 |
selectedRowBgColor | String | 当前选中行的背景色 |
# 参数详情：ruleList（注 3）
| Prop | Type | Description |
|---|---|---|
text | String | 单位名称 |
textColor | String | 单位颜色 |
min | Number | 最小值 |
max | Number | 最大值 |
# 参数详情：itemList（注 4）
| Prop | Type | Description |
|---|---|---|
id | Number | 唯一标识 |
name | String | 标识展示的具体文字 |
pid | Number | 上一级的 id |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
mideaPickerChange | 选择值变化时触发 | 示例使用 { result, data }；result === 'success' 时读取 data，data 可为数组或 JSON 字符串 |
function onMideaPickerChange(event) {
if (event.result !== 'success') return
const selected = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
// selected 为各列选中项组成的数组，每项包含 id、name 等字段。
return selected
}
1
2
3
4
5
6
2
3
4
5
6