• 引入
  • 代码演示
    • 单列数据 getColumnValuesgetColumnIndexssetColumnValues
      • 禁用2-4项
    • 弹出展示
    • 联动数据 getColumnValue(0)getColumnIndex(0)changeDefaultValue
      • 默认选中3, 2, 1项
  • API
    • Picker Props
    • Picker Methods
      • refresh(callback, startColumnIndex)
      • getColumnValue(index): activeItemValue
      • getColumnValues(): columnsValue
      • getColumnIndex(index): activeItemIndex
      • getColumnIndexs(): columnsIndex
      • setColumnValues(index, values, callback)
    • Picker Events
      • @initialed()
      • @change(columnIndex, itemIndex, value)
      • @confirm(columnsValue)
      • @cancel()
      • @show()
      • @hide()
  • 附录

    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": ""
    },
    // ...
  ]
]