picker props

属性	描述	类型	默认值
visible	是否打开picker，可通过v-model绑定	boolean	-
cancelText	取消按钮文案	string	取消
confirmText	确认按钮文案	string	确认
title	标题	string	-
data	配置每一列显示的数据	array	[]
selectedIndex	选中项下标的集合	array	[]
alias	配置data的选项的value，和label的key值	object	{label: 'label', value: 'value'}

picker events

名称	描述	参数
cancel	点击取消时触发	-
change	滚轴滚动后触发此事件	columnIndex: 滚动列的下标, itemIndex: 选项的下标
select	点击确认按钮触发此事件	pickerSelectedValue: 所选择选项的value值的集合， pickerSelectedIndex: 所选择选项的下标的集合，pickerSelectedLabel: 所选择选项的label值的集合
value-change	所确认的值变化时触发此事件	pickerSelectedValue: 所选择选项的value值的集合， pickerSelectedIndex: 所选择选项的下标的集合，pickerSelectedLabel: 所选择选项的label值的集合

例子代码

基础icon

<template>
  <div>
    <div class="items">
      <p class="item_title">单列picker</p>
      <vill-button title="单列picker" @click="visible=true"></vill-button>
    </div>
    <div class="items">
      <p class="item_title">多列picker</p>
      <vill-button title="多列picker" @click="visible2=true"></vill-button>
    </div>
    <vill-picker
      v-model="visible"
      :data="datalist"
      title="我是标题"
    >
    </vill-picker>
    <vill-picker
      v-model="visible2"
      :data="datalist2"
      :selectedIndex="selectedIndex2"
      @change="handleChange"
      @select="handleSelect"
      @value-change="handleValueChange"
    >
    </vill-picker>
  </div>
</template>

<script>
export default {
    data () {
    return {
      visible: false,
      visible2: false,
      datalist: [
        [{
            value: 1,
            label: '苹果'
          }, {
            value: 2,
            label: '黄桃'
        }]
      ],
      datalist2: [],
      selectedIndex2: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      setTimeout(() => {
        this.datalist2 = [
          [{
              value: 1,
              label: '苹果'
            }, {
              value: 2,
              label: '黄桃'
          }],
          [{
              value: 11,
              label: '苹果1'
            }, {
              value: 22,
              label: '黄桃2'
          }],
        ]
        this.selectedIndex2=[0,1]
      }, 2000)
    },
    handleChange(column, targetIndex) {
      console.log(column, targetIndex)
    },
    handleSelect(values, targetIndex, labels) {
      console.log('handleSelect', values, targetIndex, labels)
    },
    handleValueChange(values, targetIndex, labels) {
      console.log('handleValueChange', values, targetIndex, labels)
    }
  }
}
</script>