Picker 选择器

Scan me!

滚动多列选择

引入

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

代码演示

单列数据 getColumnValuesgetColumnIndexssetColumnValues

禁用2-4项

Picker 选择器 - 图2

  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.       pickerDataNew: [
  27.         {
  28.           text: 'Hello World',
  29.           value: 9999,
  30.         },
  31.       ],
  32.       pickerValue: '',
  33.     }
  34.   },
  35.   mounted() {
  36.     window.PickerTrigger0 = () => {
  37.       this.getColumnValues('picker')
  38.     }
  39.     window.PickerTrigger1 = () => {
  40.       this.getColumnIndexs('picker')
  41.     }
  42.     window.PickerTrigger2 = () => {
  43.       this.setColumnValues('picker')
  44.     }
  45.   },
  46.   methods: {
  47.     onPickerInitialed() {
  48.       const value = this.$refs.picker.getColumnValues()
  49.       console.log(`[Mand Mobile] Picker Initialed: ${JSON.stringify(value)}`)
  50.     },
  51.     onPickerConfirm(columnIndex, itemIndex, value) {
  52.       if (value) {
  53.         this.pickerValue = value.text
  54.       }
  55.     },
  56.     getColumnValues(picker) {
  57.       const value = this.$refs[picker].getColumnValues()
  58.       Dialog.alert({
  59.         content: `<pre>${JSON.stringify(value)}</pre>`,
  60.       })
  61.     },
  62.     getColumnIndexs(picker) {
  63.       const value = this.$refs[picker].getColumnIndexs()
  64.       Dialog.alert({
  65.         content: `<pre>${JSON.stringify(value)}</pre>`,
  66.       })
  67.     },
  68.     setColumnValues(picker) {
  69.       this.$refs[picker].setColumnValues(0, this.pickerDataNew, vm => {
  70.         vm.refresh(null, 0)
  71.       })
  72.     },
  73.   },
  74. }
  76. </script>
  77.  
  78.

弹出展示

Picker 选择器 - 图3

  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.         :addon="pickerValue0"
  8.         @click="isPickerShow0 = true">
  9.       </md-field-item>
  10.       <md-field-item
  11.         title="省市区/县"
  12.         arrow="arrow-right"
  13.         :addon="pickerValue1"
  14.         @click="isPickerShow1 = true">
  15.       </md-field-item>
  16.     </md-field>
  17.     <md-picker
  18.       ref="picker0"
  19.       v-model="isPickerShow0"
  20.       :data="pickerData0"
  21.       large-radius
  22.       @confirm="onPickerConfirm(0)"
  23.       title="选择年份"
  24.     ></md-picker>
  25.     <md-picker
  26.       ref="picker1"
  27.       v-model="isPickerShow1"
  28.       :data="pickerData1"
  29.       :cols="3"
  30.       is-cascade
  31.       large-radius
  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.  
  75.

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

默认选中3, 2, 1项

Picker 选择器 - 图4

        <template>
  <div class="md-example-child md-example-child-picker md-example-child-picker-1">
    <md-picker
      ref="picker"
      :data="pickerData"
      :cols="3"
      :default-index="pickerDefaultIndex"
      :default-value="pickerDefaultValue"
      is-view
      is-cascade
      @initialed="onPickerInitialed"
      @change="onPickerConfirm"
    ></md-picker>
  </div>
</template>

<script>
import {Picker, Dialog} from 'mand-mobile'
import district from 'mand-mobile/components/picker/demo/data/district'

export default {
  name: 'picker-demo',
  components: {
    [Picker.name]: Picker,
  },
  data() {
    return {
      pickerData: [],
      pickerDefaultIndex: [],
      pickerDefaultValue: [],
      pickerValue: '',
    }
  },
  mounted() {
    this.pickerData = district
    this.pickerDefaultIndex = [3, 2, 1]

    window.PickerTrigger3 = () => {
      this.getColumnValue('picker', 0)
    }
    window.PickerTrigger4 = () => {
      this.getColumnIndex('picker', 0)
    }
    window.PickerTrigger5 = () => {
      this.pickerDefaultIndex = []
      this.pickerDefaultValue = ['110000', '110100', '110101']
      setTimeout(() => {
        this.$refs.picker.refresh()
      }, 0)
    }
  },
  methods: {
    onPickerInitialed() {
      const columnValues = this.$refs.picker.getColumnValues()
      let value = ''
      columnValues.forEach(item => {
        value += `${item.label}-`
      })
      console.log(`[Mand Mobile] Picker getColumnValues: ${value.substr(0, value.length - 1)}`)
    },
    onPickerConfirm(columnIndex, itemIndex, value) {
      if (value) {
        this.pickerValue = value.text
      }
    },
    getColumnValue(picker, index) {
      const value = this.$refs.picker.getColumnValue(index)
      delete value.children
      Dialog.alert({
        content: JSON.stringify(value),
      })
    },
    getColumnIndex(picker, index) {
      const value = this.$refs.picker.getColumnIndex(index)
      Dialog.alert({
        content: `<pre>${JSON.stringify(value)}</pre>`,
      })
    },
  },
}

</script>

API

Picker Props

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

Picker Methods

refresh(callback, startColumnIndex)

重新初始化选择器，如更新data、default-index、invalid-index或调用setColumnValues，该方法也可以使用key代替

参数说明类型
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）

附录

  • 非级联数据源数据格式
[
  [
    {
      // 选项展示文案
      "text": "",
      // 以下自定义字段
      "value": ""
    },
    // ...
  ],
  // ...
]
  • 级联数据源数据格式
[
  [
    {
      // 选项展示文案
      "text": "",
      // 第二列对应数据
      "children": [
        {
          "text": "",
          // 第三列对应数据
          "children": [
            // ...
          ]
        },
        // ...
      ]
      // 以下自定义字段
      "value": ""
    },
    // ...
  ]
]