# bz-picker 滚动选择器
# 基本用法
从底部弹起的滚动选择器。支持五种选择器，通过 mode 来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，也可以自行封装省市区选择器，默认是普通选择器。
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-picker 滚动选择器</view>
<view class="demo-editor-padding">
<view>选择值: {{ strVal }}</view>
</view>
<demo-cell TBPadding="0">
<bz-picker
style="width: 300px;"
:value="value"
:range="['选项1', '选项2', '选项3']"
@change="bindChange"
><bz-button>点击选择</bz-button></bz-picker
>
</demo-cell>
<demo-cell
title="时间选择"
subTitle="mode=time"
TBPadding="0"
>
<bz-picker
style="width: 300px;"
:value="value"
:mode="'time'"
@change="bindChange"
><bz-button>点击选择时间</bz-button></bz-picker
>
</demo-cell>
<demo-cell
title="日期选择"
subTitle="mode=date"
TBPadding="0"
>
<bz-picker
style="width: 300px;"
:value="value"
:mode="'date'"
@change="bindChange"
><bz-button>点击选择日期</bz-button></bz-picker
>
</demo-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
strVal: ''
}
},
methods: {
bindChange(e) {
this.strVal = e.detail.value
}
}
}
</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
展开 刷新 关闭
# 普通选择器
mode = selector
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| range | Array / Array<{}> | [] | mode 为 selector 或 multiSelector 时，range 有效 |
| range-key | String | 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |
| value | Number | 0 | value 的值表示选择了 range 中的第几个（下标从 0 开始） |
| disabled | Boolean | false | 是否禁用 |
| appendRoot | Boolean | false | 移动端场景下，抽屉元素是否挂载到根元素, 1.0.1 新增 |
| @change | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | |
@visibleChange 1.0.2 | EventHandle | 展开/关闭时触发事件，(vis: boolean) => void | |
| @cancel | EventHandle | 取消选择或点遮罩层收起 picker 时触发 |
# 多列选择器
mode = multiSelector
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| range | 二维 Array / 二维 Array ＜ Object ＞ | [] | mode 为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]] |
| range-key | String | 当 range 是一个二维 Array ＜ Object ＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |
| value | Array | [] | value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） |
| @change | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | |
| @columnchange | EventHandle | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从 0 开始），value 的值表示变更值的下标 | |
@visibleChange 1.0.2 | EventHandle | 展开/关闭时触发事件，(vis: boolean) => void | |
| @cancel | EventHandle | 取消选择时触发 | |
| disabled | Boolean | false | 是否禁用 |
# 时间选择器
mode = time
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | 表示选中的时间，格式为"hh:mm" | |
| @change | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | |
| @cancel | EventHandle | 取消选择时触发 | |
@visibleChange 1.0.2 | EventHandle | 展开/关闭时触发事件，(vis: boolean) => void | |
| disabled | Boolean | false | 是否禁用 |
# 日期选择器
mode = date
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | 0 | 表示选中的日期，格式为"YYYY-MM-DD" |
| start | String | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | |
| end | String | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | |
| fields | String | day | 有效值 year、month、day、half、hour、minute，表示选择器的粒度，默认为 day， |
| @change | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | |
@visibleChange 1.0.2 | EventHandle | 展开/关闭时触发事件，(vis: boolean) => void | |
| @cancel | EventHandle | 取消选择时触发 | |
| disabled | Boolean | false | 是否禁用 |
fields 有效值
| 值 | 说明 |
|---|---|
| year | 选择器粒度为年 |
| month | 选择器粒度为月份 |
| day | 选择器粒度为天 |
| half | 选择器粒度半天 |
| hour | 选择器粒度为小时 |
| minute | 选择器粒度为分钟 |