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

引入方式

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

import {PickerView} from '@21cnfe/vui'  
Vue.component('PickerView', PickerView)

代码演示

基本用法 columns 设置列数据,visibleItemCount 设置可见选项数,onChange 为改变列数据回调方法
<template>
<pickerView :columns="weekColumns" @onChange="handleChange" :visibleItemCount="5" />
</template>
<script>
export default {
data () {
return {
weekColumns: [
{
values: [
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六',
'星期日'
],
defaultIndex: 0
},
{
values: ['上午', '下午'],
defaultIndex: 0
}
]
}
}
methods:{
handleChange (el, value) {
console.log('el:', el)
console.log('value:', value)
}
}
</script>

API

属性 说明 类型 默认值
columns 列数据 Array []
visibleItemCount 可见选项数,可选值[357] Number 7

Events

事件名称 说明 回调参数
onChange 改变列选择值时触发的事件 el(当前选择列的dom元素),value(当前选择列的值)
  1. 1. PickerView 选择器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 引入方式
    2. 1.2. 代码演示
    3. 1.3. API
    4. 1.4. Events