Picker

多列选择器。

引入

  1. import { Picker } from 'we-vue'
  2. Vue.use(Picker)

例子

基本示例

  1. <template>
  2. <div class="page page-with-padding">
  3. <wv-group title="选择器示例">
  4. <wv-cell title="单列(对象数组)" is-link :value="fruit.name" @click.native="fruitPickerShow = true" />
  5. <wv-cell title="多列" is-link :value="dayAndTime | pickerValueFilter" @click.native="dayPickerShow = true" />
  6. </wv-group>
  7. <wv-picker
  8. :visible.sync="fruitPickerShow"
  9. :columns="fruitColumns"
  10. value-key="name"
  11. @confirm="confirmPerson"
  12. />
  13. <wv-picker
  14. :visible.sync="dayPickerShow"
  15. :columns="dayColumns"
  16. @confirm="confirmDayTime"
  17. />
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. data () {
  23. return {
  24. fruitPickerShow: false,
  25. dayPickerShow: false,
  26. dayAndTime: [],
  27. fruit: [{name: 'Apple', age: 1}],
  28. fruitColumns: [
  29. {
  30. values: [
  31. {
  32. name: 'Apple',
  33. price: 1.3
  34. },
  35. {
  36. name: 'Banana',
  37. price: 2.0
  38. },
  39. {
  40. name: 'Orange',
  41. price: 10
  42. },
  43. {
  44. name: 'Pear',
  45. price: 0.5
  46. }
  47. ]
  48. }
  49. ],
  50. ticketColumns: [
  51. {
  52. values: [
  53. '汽车票',
  54. '飞机票',
  55. '火车票',
  56. '轮船票',
  57. '其它'
  58. ],
  59. defaultIndex: 2
  60. }
  61. ],
  62. dayColumns: [
  63. {
  64. values: [
  65. '星期一',
  66. '星期二',
  67. '星期三',
  68. '星期四',
  69. '星期五',
  70. '星期六',
  71. '星期日'
  72. ],
  73. defaultIndex: 0
  74. },
  75. {
  76. values: [
  77. '上午',
  78. '下午'
  79. ],
  80. defaultIndex: 0
  81. }
  82. ]
  83. }
  84. },
  85. methods: {
  86. onChange (picker, value) {
  87. this.$nextTick(() => {
  88. console.log(picker.getValues())
  89. })
  90. }
  91. }
  92. }
  93. </script>

省市区三级联动

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

TIP

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

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

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

API

  • picker

    参数类型说明可选值默认值
    visibleBolean是否显示false
    confirm-textString默认按钮文字'确定'
    cancel-textString取消按钮文字'取消'
    columnsArray列数据
    value-kayString当前选中项 key
    visible-item-countNumber可见选项数量7
  • picker-column

    参数类型说明可选值默认值
    dividerBoolean是否显示为分隔符false
    contentString分隔符内容''
    valuesArray选项值数组[]
    value-kayString当前选中项 key

Events

事件名说明参数
change所选值改变当前组件示例
confirmconfirm 按钮点击事件
cancelcancel 按钮点击事件