Picker 选择器

Scan me!

滚动多列选择

引入

  1. import { Picker } from 'mand-mobile'
  3. Vue.component(Picker.name, Picker)

代码演示

单列数据 getColumnValuesgetColumnIndexs

禁用2-4项
  1. <template>
  2.   <div class="md-example-child md-example-child-picker md-example-child-picker-0">
  3.     <md-picker
  4.       ref="picker"
  5.       :data="pickerData"
  6.       :invalid-index="[[2, 3, 4]]"
  7.       @initialed="onPickerInitialed"
  8.       @change="onPickerConfirm"
  9.       is-view
  10.     ></md-picker>
  11.   </div>
  12. </template>
  14. <script>
  15. import {Picker, Dialog} from 'mand-mobile'
  16. import simple from 'mand-mobile/components/picker/demo/data/simple'
  18. export default {
  19.   name: 'picker-demo',
  20.   components: {
  21.     [Picker.name]: Picker,
  22.   },
  23.   data() {
  24.     return {
  25.       pickerData: simple,
  26.       pickerValue: '',
  27.     }
  28.   },
  29.   mounted() {
  30.     window.PickerTrigger0 = () => {
  31.       this.getColumnValues('picker')
  32.     }
  33.     window.PickerTrigger1 = () => {
  34.       this.getColumnIndexs('picker')
  35.     }
  36.   },
  37.   methods: {
  38.     onPickerInitialed() {
  39.       const value = this.$refs.picker.getColumnValues()
  40.       console.log(`[Mand Mobile] Picker Initialed: ${JSON.stringify(value)}`)
  41.     },
  42.     onPickerConfirm(columnIndex, itemIndex, value) {
  43.       if (value) {
  44.         this.pickerValue = value.text
  45.       }
  46.     },
  47.     getColumnValues(picker) {
  48.       const value = this.$refs[picker].getColumnValues()
  49.       Dialog.alert({
  50.         content: `<pre>${JSON.stringify(value)}</pre>`,
  51.       })
  52.     },
  53.     getColumnIndexs(picker) {
  54.       const value = this.$refs[picker].getColumnIndexs()
  55.       Dialog.alert({
  56.         content: `<pre>${JSON.stringify(value)}</pre>`,
  57.       })
  58.     },
  59.   },
  60. }
  62. </script>
  63.

弹出展示

  1. <template>
  2.   <div class="md-example-child md-example-child-picker md-example-child-picker-2">
  3.     <md-field>
  4.       <md-field-item
  5.         title="起保年份"
  6.         arrow="arrow-right"
  7.         align="right"
  8.         :value="pickerValue0"
  9.         @click.native="isPickerShow0 = true">
  10.       </md-field-item>
  11.       <md-field-item
  12.         title="省市区/县"
  13.         arrow="arrow-right"
  14.         align="right"
  15.         :value="pickerValue1"
  16.         @click.native="isPickerShow1 = true">
  17.       </md-field-item>
  18.     </md-field>
  19.     <md-picker
  20.       ref="picker0"
  21.       v-model="isPickerShow0"
  22.       :data="pickerData0"
  23.       @confirm="onPickerConfirm(0)"
  24.       title="选择年份"
  25.     ></md-picker>
  26.     <md-picker
  27.       ref="picker1"
  28.       v-model="isPickerShow1"
  29.       :data="pickerData1"
  30.       :cols="3"
  31.       is-cascade
  32.       title="选择省市区/县"
  33.       @confirm="onPickerConfirm(1)"
  34.     ></md-picker>
  35.   </div>
  36. </template>
  38. <script>
  39. import {Picker, Field, FieldItem} from 'mand-mobile'
  40. import simple from 'mand-mobile/components/picker/demo/data/simple'
  41. import district from 'mand-mobile/components/picker/demo/data/district'
  43. export default {
  44.   name: 'picker-demo',
  45.   components: {
  46.     [Picker.name]: Picker,
  47.     [Field.name]: Field,
  48.     [FieldItem.name]: FieldItem,
  49.   },
  50.   data() {
  51.     return {
  52.       isPickerShow0: false,
  53.       isPickerShow1: false,
  54.       pickerData0: simple,
  55.       pickerData1: district,
  56.       pickerValue0: '',
  57.       pickerValue1: '',
  58.     }
  59.   },
  60.   methods: {
  61.     onPickerConfirm(index) {
  62.       const values = this.$refs[`picker${index}`].getColumnValues()
  64.       let res = ''
  65.       values.forEach(value => {
  66.         value && (res += `${value.text || value.label} `)
  67.       })
  68.       this[`pickerValue${index}`] = res
  69.     },
  70.   },
  71. }
  73. </script>
  74.

联动数据 getColumnValue(0)getColumnIndex(0)

默认选中3, 2, 1项
  1. <template>
  2.   <div class="md-example-child md-example-child-picker md-example-child-picker-1">
  3.     <md-picker
  4.       ref="picker"
  5.       :data="pickerData"
  6.       :cols="3"
  7.       :default-index="pickerDefaultIndex"
  8.       is-view
  9.       is-cascade
  10.       @initialed="onPickerInitialed"
  11.       @change="onPickerConfirm"
  12.     ></md-picker>
  13.   </div>
  14. </template>
  16. <script>
  17. import {Picker, Dialog} from 'mand-mobile'
  18. import district from 'mand-mobile/components/picker/demo/data/district'
  20. export default {
  21.   name: 'picker-demo',
  22.   components: {
  23.     [Picker.name]: Picker,
  24.   },
  25.   data() {
  26.     return {
  27.       pickerData: [],
  28.       pickerDefaultIndex: [],
  29.       pickerValue: '',
  30.     }
  31.   },
  32.   mounted() {
  33.     this.pickerData = district
  34.     this.pickerDefaultIndex = [3, 2, 1]
  36.     window.PickerTrigger2 = () => {
  37.       this.getColumnValue('picker', 0)
  38.     }
  39.     window.PickerTrigger3 = () => {
  40.       this.getColumnIndex('picker', 0)
  41.     }
  42.   },
  43.   methods: {
  44.     onPickerInitialed() {
  45.       const columnValues = this.$refs.picker.getColumnValues()
  46.       let value = ''
  47.       columnValues.forEach(item => {
  48.         value += `${item.label}-`
  49.       })
  50.       console.log(`[Mand Mobile] Picker getColumnValues: ${value.substr(0, value.length - 1)}`)
  51.     },
  52.     onPickerConfirm(columnIndex, itemIndex, value) {
  53.       if (value) {
  54.         this.pickerValue = value.text
  55.       }
  56.     },
  57.     getColumnValue(picker, index) {
  58.       const value = this.$refs.picker.getColumnValue(index)
  59.       delete value.children
  60.       Dialog.alert({
  61.         content: JSON.stringify(value),
  62.       })
  63.     },
  64.     getColumnIndex(picker, index) {
  65.       const value = this.$refs.picker.getColumnIndex(index)
  66.       Dialog.alert({
  67.         content: `<pre>${JSON.stringify(value)}</pre>`,
  68.       })
  69.     },
  70.   },
  71. }
  73. </script>
  74.

API

Picker Props

属性说明类型默认值备注
v-model选择器是否可见Booleanfalse-
data数据源Array<{value, lable, …}>[][]-
cols数据列数Number1-
default-index选择器各列初始选中项索引Array[]-
invalid-index选择器各列不可用选项索引Array[]某列多个不可用项使用数组，单个使用数字, 如[[1,2], 2]
is-view是否内嵌在页面内展示，否则以弹层形式Booleanfalse-
is-cascade各列数据是否级联Booleanfalse级联数据格式见附录
title选择器标题String--
ok-text选择器确认文案String确认-
cancel-text选择器取消文案String取消-
mask-closable点击蒙层是否可关闭弹出层Booleantrue-

Picker Methods

refresh(callback, startColumnIndex)

重新初始化选择器，如更新data, default-index或invalid-index

参数说明类型
callback初始化完成回调Function
startColumnIndex从某列开始重置，默认为0Function
getColumnValue(index): activeItemValue

获取某列当前选中项的值，需在initialed事件触发之后或异步调用

参数说明类型
index列索引Number

返回

属性说明类型
activeItemValue选中项的值Object: {value, lable, …}
getColumnValues(): columnsValue

获取所有列选中项的值，需在initialed事件触发之后或异步调用

返回

属性说明类型
columnsValue所有列选中项的值Array<{value, lable, …}>
getColumnIndex(index): activeItemIndex

获取某列当前选中项的索引值，需在initialed事件触发之后或异步调用

参数说明类型
index列索引Number

返回

属性说明类型
activeItemIndex选中项的索引值Number
getColumnIndexs(): columnsIndex

获取所有列选中项的索引值，需在initialed事件触发之后或异步调用

返回

属性说明类型
columnsIndex所有列选中项的索引值Array
setColumnValues(index, values, callback)

设置某列数据

参数说明类型
index列索引Number
values列数据Array<{value, lable, …}>
callback列数据设置完成回调Function

Picker Events

@initialed()

选择器数据初始化完成事件，可调用getColumnIndex, getColumnIndexs, getColumnValue, getColumnValues方法

@change(columnIndex, itemIndex, value)

选择器选中项更改事件

参数说明类型
columnIndex更改列的索引值Number
itemIndex更改列选中项的索引值Number
value更改列选中项的的值Object: {value, lable, …}
@confirm(columnsValue)

选择器确认选择事件（仅is-view为false）

参数说明类型
columnsValue所有列选中项的值Array<{value, lable, …}>
@cancel()

选择器取消选择事件（仅is-view为false）

@show()

选择器弹层展示事件（仅is-view为false）

@hide()

选择器弹层隐藏事件（仅is-view为false）

附录

  • 非级联数据源数据格式
  1. [
  2.   [
  3.     {
  4.       // 选项展示文案
  5.       "text": "",
  6.       // 以下自定义字段
  7.       "value": ""
  8.     },
  9.     // ...
  10.   ],
  11.   // ...
  12. ]
  • 级联数据源数据格式
  1. [
  2.   [
  3.     {
  4.       // 选项展示文案
  5.       "text": "",
  6.       // 第二列对应数据
  7.       "children": [
  8.         {
  9.           "text": "",
  10.           // 第三列对应数据
  11.           "children": [
  12.             // ...
  13.           ]
  14.         },
  15.         // ...
  16.       ]
  17.       // 以下自定义字段
  18.       "value": ""
  19.     },
  20.     // ...
  21.   ]
  22. ]