Mand Mobile

TabPicker 多级联动选择器

底部级联选择的tab切换面板

引入

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

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

代码演示

API

TabPicker 参数

属性说明类型默认值备注
value控制显示或隐藏Booleanfalse
default-value默认值Array[]
data数据源Array[]数据格式参考附录
title弹窗标题String
describe弹窗描述文本String
placeholder默认提示文本String请选择
mask-closable点击蒙层是否可关闭弹出层Booleantrue

TabPicker 实例方法

getSelectedValues()

获取所有面板选中项的值

['value1', 'value2', 'value3']

getSelectedOptions()

获取所有面板选中项对象

[
  { value: 'value1', label: 'Item1' },
  { value: 'value2', label: 'Item2' },
  // ...
]

TabPicker 事件

@select(data)

选项选中事件

// data对象
{
  index: 0,
  value: 'value1',
  options: { value: 'value1', label: 'Item1' }
}

@change(data)

底部弹窗选中事件

// data对象
{
  values: ['value1', 'value2', 'value3'],
  options: [
    { value: 'value1', label: 'Item1' },
    { value: 'value2', label: 'Item2' },
    // ...
  ]
}

@show()

底部弹窗弹层展示事件

@hide()

底部弹窗弹层隐藏事件

TabPicker 插槽

选项插槽自定义

<md-tab-picker>
  <div slot="item" scoped-slot="{ option }">
    Hello, {{option.label}}
  </div>
</md-tab-picker>

附录

  • 级联数据源数据格式
{
  // 唯一键名
  name: '',
  // 面板标签
  label: '',
  // 选项列表
  options: [
    {
      // 选项值
      value: "",
      // 选项标签
      label: "",
      // 级联子面板
      children: {
        name: '',
        label: '',
        options: [
          // ...
        ]
      }
    }
  ]
}