反馈组件 Feedback - TabPicker 多频道选择器 - 《Mand Mobile v1.x 组件文档》

引入
使用指南
代码演示
API
附录

TabPicker 多级联动选择器

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

引入

import { TabPicker } from 'mand-mobile'
Vue.component(TabPicker.name, TabPicker)

使用指南

tab切换的title支持自定义渲染（通过slot-scope）

  <!-- props 为每个tab标签的数据 -->
  <div
      slot="titles"
      slot-scope="props"
      class="title-item">
      标签dom
      {{ props.label }}
    </div>

异步级联面板支持传入slot

  <!--异步获取数据loading slot-->
  <div slot="loading">loading内容</div>
  <!--异步获取数据异常 slot -->
  <div slot="error">数据异常</div>

代码演示

普通多频道

<template>
  <div class="md-example-child md-example-child-tab-picker md-example-child-tab-picker-0">
    <md-button @click="showTabPicker">普通多频道</md-button>
    <md-tab-picker
      v-model="isTabPickerShow"
      :title="title"
      :data="pickerData"
      ok-text="确认"
      cancel-text="取消"
      @confirm="onTabPickerConfirm"
      @change="onTabPickerChange"
    ></md-tab-picker>
  </div>
</template>
<script>
import {Button, TabPicker} from 'mand-mobile'
import pickerData from 'mand-mobile/components/tab-picker/demo/data/no-cascade'
export default {
  name: 'tab-picker-demo',
  components: {
    [TabPicker.name]: TabPicker,
    [Button.name]: Button,
  },
  data() {
    return {
      isTabPickerShow: false,
      title: '选择title',
      pickerData,
    }
  },
  methods: {
    showTabPicker() {
      this.isTabPickerShow = true
    },
    onTabPickerConfirm(selected) {
      if (selected) {
        console.log(`[Mand Mobile] TabPicker 确认选择项: ${JSON.stringify(selected)}`)
      } else {
        console.warn('[Mand Mobile] TabPicker 点击确认按钮时未选择到任何确定项')
      }
    },
    onTabPickerChange(select) {
      console.log(
        `[Mand Mobile] TabPicker 第${select.selectTab}列, 第${select.selectIndex}项: label: ${select.selectItem
          .label}, value: ${select.selectItem.value}`,
      )
    },
  },
}
</script>

异步级联多频道

<template>
  <div class="md-example-child md-example-child-tab-picker md-example-child-tab-picker-2">
    <md-button @click="showTabPicker">异步级联多频道</md-button>
    <md-tab-picker
      v-model="isTabPickerShow"
      data-struct="async"
      :title="title"
      :async-func="asyncFunc"
      :option-render="optionRenders"
      ok-text="确认"
      cancel-text="取消"
      @confirm="onTabPickerConfirm"
      @change="onTabPickerChange"
    ></md-tab-picker>
  </div>
</template>
<script>
import {Button, TabPicker} from 'mand-mobile'
const NOOP = () => {}
export default {
  name: 'tab-picker-demo',
  components: {
    [TabPicker.name]: TabPicker,
    [Button.name]: Button,
  },
  data() {
    return {
      isTabPickerShow: false,
      title: '选择title',
      optionRenders: [NOOP, NOOP, this.optionRender],
    }
  },
  methods: {
    asyncFunc: (value, callback) => {
      console.log('loading')
      setTimeout(() => {
        callback(null, {
          options: [
            {
              label: '一级选项一',
              value: '0271',
            },
            {
              label: '一级选项二',
              value: '0272',
            },
          ],
          asyncFunc: (value, callback) => {
            console.log('第一级选择项', value)
            callback(null, {
              options: [
                {
                  label: '二级选项一',
                  value: '0271',
                },
                {
                  label: '二级选项二',
                  value: '0272',
                },
              ],
              asyncFunc: (value, callback) => {
                console.log('第二级选择项', value)
                callback(null, {
                  options: [
                    {
                      label: '三级选项一',
                      value: '0271',
                    },
                    {
                      label: '三级选项二',
                      value: '0272',
                    },
                  ],
                })
              },
            })
          },
        })
      }, 1000)
    },
    optionRender(item) {
      return `<div class="md-field-item-custom-title">${item.label}</div><div class="md-field-item-custom-brief">十年前你说生如夏花般灿烂，十年后你说平凡才是唯一的答案</div>`
    },
    showTabPicker() {
      this.isTabPickerShow = true
    },
    onTabPickerConfirm(selected) {
      if (selected) {
        console.log(`[Mand Mobile] TabPicker 确认选择项: ${JSON.stringify(selected)}`)
      } else {
        console.warn('[Mand Mobile] TabPicker 点击确认按钮时未选择到任何确定项')
      }
    },
    onTabPickerChange(select) {
      console.log(
        `[Mand Mobile] TabPicker 第${select.selectTab}列, 第${select.selectIndex}项: label: ${select.selectItem
          .label}, value: ${select.selectItem.value}`,
      )
    },
  },
}
</script>

级联多频道

<template>
  <div class="md-example-child md-example-child-tab-picker md-example-child-tab-picker-1">
    <md-button @click="showTabPicker">级联多频道</md-button>
    <md-tab-picker
      v-model="isTabPickerShow"
      :title="title"
      :data="pickerData"
      data-struct="cascade"
      ok-text="确认"
      cancel-text="取消"
      :option-render="optionRenders"
      @confirm="onTabPickerConfirm"
      @change="onTabPickerChange"
    ></md-tab-picker>
  </div>
</template>
<script>
import {Button, TabPicker} from 'mand-mobile'
import pickerData from 'mand-mobile/components/tab-picker/demo/data/cascade'
const NOOP = () => {}
export default {
  name: 'tab-picker-demo',
  components: {
    [TabPicker.name]: TabPicker,
    [Button.name]: Button,
  },
  data() {
    return {
      isTabPickerShow: false,
      title: '选择title',
      optionRenders: [NOOP, NOOP, this.optionRender],
      pickerData,
    }
  },
  methods: {
    optionRender(item) {
      return `<div class="md-field-item-custom-title">${item.label}</div><div class="md-field-item-custom-brief">十年前你说生如夏花般灿烂，十年后你说平凡才是唯一的答案</div>`
    },
    showTabPicker() {
      this.isTabPickerShow = true
    },
    onTabPickerConfirm(selected) {
      if (selected) {
        console.log(`[Mand Mobile] TabPicker 确认选择项: ${JSON.stringify(selected)}`)
      } else {
        console.warn('[Mand Mobile] TabPicker 点击确认按钮时未选择到任何确定项')
      }
    },
    onTabPickerChange(select) {
      console.log(
        `[Mand Mobile] TabPicker 第${select.selectTab}列, 第${select.selectIndex}项: label: ${select.selectItem
          .label}, value: ${select.selectItem.value}`,
      )
    },
  },
}
</script>

API

TabPicker Props

属性	说明	类型	默认值	备注
v-model	控制显示或隐藏	Boolean	`false`	-
data	数据源	Array	`[]`	数据格式参考`附录`
data-struct	数据级联类型	String	`noCascade`	`normal`, `cascade`, `async`
default-index	初始选中项索引	Array	`[]`	-
option-render	返回各选项渲染内容	Array<Function({text, disabled, …}):String>	`[]`	`vue 2.1.0+`可使用`slot-scope`，见附录
async-func	异步获取数据函数	Function(value, callBack)	-	-
title	弹窗标题	String	-	-
ok-text	确认按钮文案	String	`确认`	-
cancel-text	取消按钮文案	String	`取消`	-
placeholder^1.6.3+	待选择提示文案	String	`请选择`	-
errorLabel^1.6.3+	数据源错误文案	String	`数据异常`	-
loadingLabel^1.6.3+	异步加载文案	String	`加载中`	-
mask-closable^1.3.0+	点击蒙层是否可关闭弹出层	Boolean	`true`	-

TabPicker Methods

getSelectedItem()

获取所有列选中项的值

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

TabPicker Events

@change(select)

底部弹窗选中事件

属性	说明	类型
select	各列选中项值	Object: {value,lable}

@confirm(selected)

底部弹窗确认选择事件

属性	说明	类型
selected	各列选中项值	Array<{value,lable}>

@cancel()

底部弹窗取消选择事件

@show()

底部弹窗弹层展示事件

@hide()

底部弹窗弹层隐藏事件

附录

非级联数据源数据格式

[
  {
    // 选项展示文案
    "label": "",
    // 以下自定义字段
    "value": "",
    //该选项下的列表
    "children": [
      {
        "label": "",
        "value": ""
      },
      // ...
    ]
  },
  // ...
  // ...
]

级联数据源数据格式

[
  {
    // 选项展示文案
    "label": "",
    // 选项值
    "value": "",
    // 第二列对应数据
    "children": [
      {
        "label": "",
        "value": "",
        "children": [
          //...
        ]
      }
    ]
  },
  //...
]

异步级联数据源数据格式

{
  "options": [
    {
    // 选项展示文案
    "label": "",
    // 选项值
    "value": ""
    },
    //...
  ]
  "asyncFunc": (value, callback) => {
    callback(null, {
      "options": [
        {
          "label": '',
          "value": ''
        },
        //...
      ],
      "asyncFunc": (value, callback) => {
        //...
      }
    })
  }
}

自定义渲染option

<template>
  <md-tab-picker
    :data="data"
  >
    <!-- option 为每个选项的数据 -->
    <li
      slot="option"
      slot-scope="props"
      class="option-item">
      公共dom样式
      <div v-if="props.index === 0" >
        第{{ props.index }}列dom样式 {{ props.option.label }}
      </div>
      <div v-else-if="props.index === 1">
        第{{ props.index }}列dom样式  {{ props.option.label }}
      </div>
      <div v-else>
        第{{ props.index }}列dom样式 {{ props.option.label }}
      </div>
    </li>
  </md-tab-picker>
</template>