Mand Mobile

TabPicker

Support cascaded selections in the footer

Import

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

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

Code Examples

API

TabPicker Props

PropsDescriptionTypeDefaultNote
v-modelwhether to show tabpicker or notBooleanfalse-
default-valuedefault valuesArray[]-
datadata sourceArray[]refer to Appendix for data format
titlethe title of tabpickerString--
describethe describe of tabpickerString--
placeholderdefault label for each tab paneString请选择-
mask-closableif the popup will be closed when clicking on the maskBooleantrue-

TabPicker Methods

getSelectedValues()

Get all values of selected items

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

getSelectedOptions()

Get all options of selected items

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

TabPicker Events

@select(data)

Option selected event

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

Change selection in the tabpicker

// data object
{
  values: ['value1', 'value2', 'value3'],
  options: [
    { value: 'value1', label: 'Item1' },
    { value: 'value2', label: 'Item2' },
    // ...
  ]
}
@show()

Show tabPicker

@hide()

Hide tabPicker

TabPicker Slots

Custom option item slot

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

Appendix

  • Data format of cascaded data source
{
  // unique key
  name: '',
  // pane title
  label: '',
  // pane options
  options: [
    {
      // option value
      value: "",
      // option label
      label: "",
      // cascade pane
      children: {
        name: '',
        label: '',
        options: [
          // ...
        ]
      }
    }
  ]
}