Picker

Scrollable multi-column selector

Import

import { Picker } from  'mand-mobile-next'

Vue.createApp().component(Picker.name, Picker)

Code Examples

API

Picker Props

PropsDescriptionTypeDefaultNote
v-modelvalues of initially selected items in each columnArray[]Available key value
datadata sourceArray<{value, text, ...}>[][]-
colsnumber of columnsNumber1-
invalid-valuevalues of disabled items in each columnArray[]array of multiple disabled items, such as [[1,2], [2]]
is-viewinline display in page, otherwise it shows as PopupBooleanfalse-
is-cascadedata in each column is cascaded or notBooleanfalsesee #Appendix for the format of cascaded data
keep-indexkeep last stop position when the column data changesBooleanfalseonly for cascaded data
line-heightline height of optionsNumber45unit px
titletitle of pickerString--
describedescription of pickerString--
ok-textconfirmation textStringconfirm-
cancel-textcancellation textStringcancel-
mask-closablepicker will be closed when clicking maskBooleantrue-

Picker Methods

getColumnValue(index): activeItemValue

Get the data of the currently selected item in a column

ParametersDescriptionType
indexthe index of each columnNumber

Returns

PropsDescriptionType
activeItemValuevalue of selected itemObject: {value, text, ...}

Picker Events

@change(columnIndex, itemIndex, value)

Change pickers' selections

ParametersDescriptionType
columnIndexthe index of changed columnNumber
itemIndexthe index of changed item in the columnNumber
valuethe value of changed item in the columnObject: {value, text, ...}
@confirm()

Confirm picker's selection (only when is-view is false

@cancel()

Cancel picker's selection (only when is-view is false

@show()

Show picker (only when is-view is false

@hide()

Hide picker (only when is-view is false

Appendix

  • The format of non-cascade data source
[
  [
    {
      // Option display text
      "text": "",
      // Option value
      "value": ""
    },
    // ...
  ],
  // ...
]
  • The format of cascaded data source
[
  [
    {
      // Option display text
      "text": "",
      // data of second column
      "children": [
        {
          "text": "",
          // data of third column
          "children": [
            // ...
          ]
        },
        // ...
      ]
      // Option value
      "value": ""
    },
    // ...
  ]
]