Picker 选择器
自定义picker,用于单列,多列,多列联动的选择场景。
基本用法
js
myPicker.value.open({
// 属性
mode:'single',
columns:[],
// ...
// 事件
confirm: (res) => {}
// ...
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
平台
App | 小程序 | H5 |
---|---|---|
√ | √ | √ |
属性
属性名 | 类型 | 默认值 | 说明 | 平台 |
---|---|---|---|---|
name | String | null | 选择器名 用于事件中返回 | All |
value | Number,String,Array | null | 默认选中的值 | All |
mode | String | 选择器模式single/multi/tree | All | |
columns | Array | [] | 列数据 mode=single格式: ['标题1','标题二'] mode=multi格式: [['标题1','标题二'],...] mode=tree格式: [{label:'标题',value:'值',children:[]},...] | All |
treeLevel | Number,String | null | mode=tree时,显示的层级 不填时默认从第一条数据第一个children中计算,使用异步加载数据时必填 | All |
title | String,Object | null | 标题 object请 c-text 组件的pros | All |
itemHeight | String,Number | 88rpx | 行高度 | All |
itemRowCount | String,Number | 7 | 显示的行数量 | All |
prompt | String | null | 显示默认项 | All |
labelName | String | label | 列数据label字段名设置 | All |
valueName | String | value | 列数据value字段名设置 | All |
childrenName | String | children | 列数据children字段名设置 | All |
bottomBtn | Boolean | false | 按钮位置是否在底部 为true时,为按钮样式,false时为文字样式 | All |
cancelText | String,Object | 取消 | 按钮 object请 c-text 和c-btn 组件的pros | All |
confirmText | String,Object | 确定 | 同cancelText | All |
radius | Number,String | null | 圆角 | All |
position | String | bottom | 打开位置,top,center,bottom | All |
closeOnMaskClick | Boolean | true | 点击遮罩关闭 | All |
maskBgColor | String | rgba(0, 0, 0, 0.4) | 弹出层背景 | All |
animation | Boolean | true | 开启动画 | All |
titleProps | Object | {} | 标题文本配置 参考c-text组件的props | All |
itemTextProps | Object | {} | 选项文本配置 参考c-text组件的props | All |
loadingPageProps | Object | {} | loading配置,在open({pickerChange:()=>new Promise()}}) 时有效参考c-loading-page组件的props | All |
required | Boolean,Number,String | false | 是否必选,为数字时表示必选的列数 | All |
customTabBar | Boolean | false | 是否自定义tabBar | MP-WEIXIN |
indicatorStyle | String | 设置选择器中间选中框的样式 | All | |
indicatorClass | String | 设置选择器中间选中框的类名 | All | |
maskStyle | String | 设置蒙层的样式 | All | |
maskClass | String | 设置蒙层的类 | All | |
cClass | String,Array,Object | null | 组件类 | All |
cStyle | String,Array,Object | null | 组件样式 | All |
margin | String,Number,Array | null | 外边距 | All |
padding | String,Number,Array | null | 内边距 | All |
bgColor | String | null | 背景色,支持c-bg- 开头的背景色类 | All |
提示
微信小程序tabBar页面使用,当自定义tabBar时,需要设置customTabBar
为true
,否则会显示不正确。
城市选择数据资源:中国行政区划。
事件
事件名 | 说明 |
---|---|
close | {name} |
open | {name} |
confirm | {name,label,value,full} ,type="single"时label、value为字符串,其他类型为数组 |
cancel | {name} |
titleClick | {name} |
pickerChange | {name,value,columns,selectedItems} value子项值为-1时表示该列未选中 |
插槽
插槽名 | 说明 |
---|---|
default | 选择器上方,按钮下方 |
after | 选择器下方 |
方法
名称 | 说明 |
---|---|
open(null|props) | 打开Picker 传递 props 时,将覆盖组件props |
close() | 关闭 |
动态列数据
使用open()
方法,传入pickerChange
回调,可以更改动态的更改columns
列数据,只需返回修改完成后的columns
列数据即可。
如果返回一个Promise
,则会显示loading状态,并等待Promise
完成。
pickerChange({name,value,columns,selectedItems})
回调参数:
name
: 选择器名value
: 当前选中的列数据索引号,数组,多列时,数组项为-1时表示未选中columns
: 所有列数据selectedItems
: 当前选中的完整数据
以下是异步加载列数据示例:
vue
<template>
<c-picker ref="myPicker" />
<c-btn @click="openPicker">打开</c-btn>
</template>
<script setup>
import { ref } from "vue"
const myPicker = ref(null);
function openPicker(){
myPicker.value.open({
mode: 'tree',
prompt:'请选择',
columns:[
{
label: '1',
value: '1'
},
{
label: '2',
value: '2'
}
],
treeLevel:3,
pickerChange:function ({value,columns,selectedItems}){
// 拼接需要设置或获取的子项路径
const setObjPath = [];
value.forEach((n,i)=>{
if(n!== -1){
setObjPath.push(n+'.children')
}
});
const setObjPathStr = setObjPath.join('.')
// 判断子项是否有children
if(setObjPathStr && uni.$c.isEmpty(uni.$c.getObjValue(columns,setObjPathStr))){
return new Promise(resolve=>{
getDemoTreeData(selectedItems[selectedItems.length-1]).then(res=>{
uni.$c.setObjValue(columns,setObjPathStr,res)
resolve(columns)
})
})
}
},
confirm:function (val){
uni.$c.toast(`${val.label.join(',')}`)
}
})
}
// 模拟异步请求数据
function getDemoTreeData(lastItem){
return new Promise(resolve=>{
setTimeout(()=>{
const children = [];
uni.$c.forEach(3,num=>{
children.push({
label:`${lastItem.label}-${num}`,
value:`${lastItem.value}-${num}`
})
})
resolve(children)
},1000)
})
}
</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
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
提示
pickerChange()
只有滑动时才会触发,所以建议设置prompt="请选择"
属性
mode=tree
需要设置treeLevel
示例
vue
<template>
<c-picker ref="myPicker" />
<c-btn @click="openPicker">打开</c-btn>
</template>
<script setup>
import { ref } from 'vue'
const myPicker = ref(null);
function openPicker() {
myPicker.value.open({
mode:'tree', // 会覆盖组件上的mode=single
value:1,
prompt:'请选择',
columns: [
{label:'标题1',value:1},
{label:'标题2',value:2},
],
confirm:(res)=> {
console.log(res);
}
});
}
</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