Mand Mobile

Picker 选择器

滚动多列选择

引入

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

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

代码演示

API

Picker Props

属性说明类型默认值备注
v-model选择器各列初始选中项值Array[]选项值字段value
data数据源Array<{value, text, ...}>[][]-
cols数据列数Number1-
invalid-value选择器各列不可用选项值Array[]选项值字段value,某列多个不可用项使用数组,如[[1,2], [2]]
line-height选择器选项行高Number45单位px
is-view是否内嵌在页面内展示，否则以弹层形式Booleanfalse-
is-cascade各列数据是否级联Booleanfalse级联数据格式见附录
keep-index当列数据变化时保持上次停留的位置Booleanfalse仅用于级联数据
title选择器标题String--
describe选择器描述String--
ok-text选择器确认文案String确认-
cancel-text选择器取消文案String取消-
mask-closable点击蒙层是否可关闭弹出层Booleantrue-

Picker Methods

getColumnValues(): columnsValue

获取所有列选中项的值

返回

属性说明类型
columnsValue所有列选中项的值Array<{value, text, ...}>

Picker Events

@change(columnIndex, itemIndex, value)

选择器选中项更改事件

参数说明类型
columnIndex更改列的索引值Number
itemIndex更改列选中项的索引值Number
value更改列选中项的的值Object: {value, text, ...}

@confirm()

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

@cancel()

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

@show()

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

@hide()

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

附录

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