Picker 选择器 APP
该方法或组件支持移动端小程序调用
PC
该方法或组件支持桌面端小程序调用

在一组预设数据中进行选择,e.g. 省市区选择。

规则

  • 尽量使用 Picker 来帮助用户完成输入,避免用户通过键盘直接输入。
  • DatePicker 是 Picker 的特定模式。

引入方式

数字生活网页应用工程中,不需要 import,直接使用组件标签即可。

点击复制
import { Picker } from '@21cnfe/vui'
Vue.component('Picker', Picker)

代码演示

基本选择器(一列)

点击复制
<template>
<List>
<span slot="header">开始</span>
<Item arrow="horizontal" @onClick="getStart">
<div slot="title">开始</div>
<div slot="content">{{start}}</div>
</Item>
</List>

<Picker
:visible.sync = "startPickerShow"
:columns="startCol"
ref="picker"
:title="titleText"
@confirm="startConfirm"
></Picker>
</template>
<script>
export default {
data () {
return {
startPickerShow: false,
start: '',
startCol: [ {
values: ['1', '2', '3', '4'],
defaultIndex: 0
}],
}
},
methods: {
getStart () {
this.startPickerShow = true
},
startConfirm (picker) {
this.startDate = picker.getValues().toString()
}
}
}
</script>

基本选择器(两列)

点击复制
<template>
<List>
<span slot="header">星期选择</span>
<Item arrow="horizontal" @onClick="getStart">
<div slot="title">开始</div>
<div slot="content">{{start}}</div>
</Item>
</List>

<Picker
:visible.sync = "startPickerShow"
:columns="startCol"
ref="picker"
:title="titleText"
@confirm="startConfirm"
></Picker>
</template>
<script>
export default {
data () {
return {
startPickerShow: false,
start: '',
dayColumns: [
{
values: [
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六',
'星期日'
],
defaultIndex: 0
},
{
values: [
'上午',
'下午'
],
defaultIndex: 0
}
]
}
},
methods: {
getStart () {
this.startPickerShow = true
},
startConfirm (picker) {
this.startDate = picker.getValues().toString()
}
}
}
</script>

地址选择器(联动)

点击复制
<template>
<List>
<span slot="header">地址选择器:默认</span>
<Item class="test-style" arrow="horizontal" @onClick="handleClick">
<div slot="title">地址</div>
<div slot="content">{{ pickedAddress }}</div>
</Item>
</List>
<Picker
ref="addressPicker"
title="省份-城市-区域选择器"
:visible.sync = "addressPickerShow"
:columns="addressColumns"
@confirm="addressConfirm"
@change="onAddressChange"
/>
</template>
<script>
const provinces = ['广东省'];

// 获取某一省下的市
const getCities = (province) => {
let cities = [];
switch (province) {
case '广东省':
cities = ['广州市', '深圳市'];
break;
default:
break;
}
return cities;
}

// 获取某一市下的区/县
function getAreas (province, city) {
let areas = []
if (province === '广东省') {
switch(city) {
case '广州市':
areas = ['荔湾区', '越秀区', '海珠区', '天河区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区']
break;
case '深圳市':
areas = ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区'];
break;
}
}
return areas;
}

export default {
data () {
return {
addressPickerShow: false,
titleText: 'titleText',
addressColumns: [
{
values: provinces
},
{
values: getCities('广东省')
},
{
values: getAreas('广东省', '广州市')
}
],
}
},
methods: {
handleClick () {
this.addressPickerShow = true
},
addressConfirm (picker) {
this.pickTime = picker.getValues().toString()
},
onAddressChange (picker, addressValues, slotIndex) {
if (slotIndex === 0) {
const cities = getCities(addressValues[0])
picker.setColumnValues(1, cities)
picker.setColumnValues(2, getAreas(addressValues[0], cities[0]))
} else if (slotIndex === 1) {
picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1]))
}
}
}
}
</script>

API

picker

属性 说明 类型 默认值
visible 是否显示 Boolean false
confirm-text 默认按钮文字 String '确定'
title 调起的选择器标题 String --
cancel-text 取消按钮文字 String '取消'
columns 列数据 Array []
value-key 当前选中项key,指定数据中某个key作为渲染显示数据 String --
visibleItemCount 可见选项数量,可选值:[3, 5, 7] Number 7

Events

事件名称 说明 参数
change 所选值改变 当前组件示例
confirm confirm按钮点击事件 --
cancel cancel按钮点击事件 --
  1. 1. Picker 选择器
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
      1. 1.3.1. 基本选择器(一列)
      2. 1.3.2. 基本选择器(两列)
      3. 1.3.3. 地址选择器(联动)
    4. 1.4. API
      1. 1.4.1. picker
    5. 1.5. Events