Picker

多列选择器。

引入

import { Picker } from 'we-vue'

Vue.use(Picker)
1
2
3

例子

基本示例

<template>
  <div class="page page-with-padding">
    <wv-group title="选择器示例">
      <wv-cell title="单列(对象数组)" is-link :value="fruit.name" @click.native="fruitPickerShow = true" />
      <wv-cell title="多列" is-link :value="dayAndTime | pickerValueFilter" @click.native="dayPickerShow = true" />
    </wv-group>

    <wv-picker
      :visible.sync="fruitPickerShow"
      :columns="fruitColumns"
      value-key="name"
      @confirm="confirmPerson"
    />
    <wv-picker
      :visible.sync="dayPickerShow"
      :columns="dayColumns"
      @confirm="confirmDayTime"
    />
  </div>
</template>

<script>
  export default {
    data () {
      return {
        fruitPickerShow: false,
        dayPickerShow: false,
        dayAndTime: [],
        fruit: [{name: 'Apple', age: 1}],
        fruitColumns: [
          {
            values: [
              {
                name: 'Apple',
                price: 1.3
              },
              {
                name: 'Banana',
                price: 2.0
              },
              {
                name: 'Orange',
                price: 10
              },
              {
                name: 'Pear',
                price: 0.5
              }
            ]
          }
        ],
        ticketColumns: [
          {
            values: [
              '汽车票',
              '飞机票',
              '火车票',
              '轮船票',
              '其它'
            ],
            defaultIndex: 2
          }
        ],
        dayColumns: [
          {
            values: [
              '星期一',
              '星期二',
              '星期三',
              '星期四',
              '星期五',
              '星期六',
              '星期日'
            ],
            defaultIndex: 0
          },
          {
            values: [
              '上午',
              '下午'
            ],
            defaultIndex: 0
          }
        ]
      }
    },

    methods: {
      onChange (picker, value) {
        this.$nextTick(() => {
          console.log(picker.getValues())
        })
      }
    }
  }
</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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

省市区三级联动

省市区三级联运示例代码较多,不便于在文档中显示和查看,建议查看相应示例的源码

TIP

v3.x 版本中新增了省市区选择器,待正式版发布后,可考虑升级。

picker 上注册了下列方法,最常见的使用场景就是在 change 事件中使用它们,以便获取或更改当前 picker 的值(包括获取/设置 column 的值)

  • getColumnValue(index):获取给定列目前被选中的值
  • setColumnValue(index, value):设定给定列被选中的值,该值必须存在于该列的备选值数组中
  • getColumnValues(index):获取给定列的备选值数组
  • setColumnValues(index, values):设定给定列的备选值数组
  • getValues():获取所有列目前被选中的值(分隔符列除外)
  • setValues(values):设定所有列被选中的值(分隔符列除外),该值必须存在于对应列的备选值数组中

API

  • picker
参数 类型 说明 可选值 默认值
visible Bolean 是否显示 false
confirm-text String 默认按钮文字 '确定'
cancel-text String 取消按钮文字 '取消'
columns Array 列数据
value-kay String 当前选中项 key
visible-item-count Number 可见选项数量 7
  • picker-column
参数 类型 说明 可选值 默认值
divider Boolean 是否显示为分隔符 false
content String 分隔符内容 ''
values Array 选项值数组 []
value-kay String 当前选中项 key

Events

事件名 说明 参数
change 所选值改变 当前组件示例
confirm confirm 按钮点击事件
cancel cancel 按钮点击事件
中国联通
20.45