CascadePicker 级联选择器

使用指南

CascadePicker组件是实现级联的picker选择器

TIP

此组件基于h3-picker组件实现 , 属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div class="list">
    <p>cascade-picker 组件</p>
    <h3-button @click="cascadepickervisible = true" type="primary">
      show cascadepicker(flat data)
    </h3-button>
    <br />
    <h3-button @click="cascadepickervisible2 = true" type="primary">
      show cascadepicker(tree data)
    </h3-button>

    <h3-cascade-picker
      v-model="cascadepickervisible"
      :data="list3"
      maskClosable
      flat
    />
    <h3-cascade-picker
      v-model="cascadepickervisible2"
      :data="list4"
      :flat="false"
      maskClosable
    />
  </div>
</template>

<script>
import H3CascadePicker from '@/components/h3-cascade-picker/';
import H3Button from '@/components/h3-button/';

export default {
  name: 'CascadePicker',
  components: {
    H3CascadePicker,
    H3Button,
  },
  data () {
    return {
      cascadepickervisible: false,
      cascadepickervisible2: false,
      list3: [
        {
          label: '中国',
          value: 'china',
          parent: 0,
        },
        {
          label: '中国2',
          value: 'china1',
          parent: 0,
        },
        {
          label: '美国',
          value: 'USA',
          parent: 0,
        },
        {
          label: '广东',
          value: 'china001',
          parent: 'china',
        },
        {
          label: '广西',
          value: 'china002',
          parent: 'china',
        },
        {
          label: '美国001',
          value: 'usa001',
          parent: 'USA',
        },
        {
          label: '美国002',
          value: 'usa002',
          parent: 'USA',
        },
        {
          label: '广州',
          value: 'gz',
          parent: 'china001',
        },
        {
          label: '广州2',
          value: 'gz2',
          parent: 'china001',
        },
        {
          label: '深圳',
          value: 'sz',
          parent: 'china001',
        },
        {
          label: '广西001',
          value: 'gx001',
          parent: 'china002',
        },
        {
          label: '广西002',
          value: 'gx002',
          parent: 'china002',
        },
        {
          label: '美国001_001',
          value: '0003',
          parent: 'usa001',
        },
        {
          label: '美国001_002',
          value: '0004',
          parent: 'usa001',
        },
        {
          label: '美国002_001',
          value: '0005',
          parent: 'usa002',
        },
        {
          label: '美国002_002',
          value: '0006',
          parent: 'usa002',
        },
      ],
      list4: [
        {
          label: '中国',
          value: 'china',
          parent: 0,
          children: [
            {
              label: '广东',
              value: 'china001',
              parent: 'china',
              children: [
                {
                  label: '广州',
                  value: 'gz',
                  parent: 'china001',
                },
                {
                  label: '广州2',
                  value: 'gz2',
                  parent: 'china001',
                },
                {
                  label: '深圳',
                  value: 'sz',
                  parent: 'china001',
                },
              ],
            },
            {
              label: '广西',
              value: 'china002',
              parent: 'china',
              children: [
                {
                  label: '广西001',
                  value: 'gx001',
                  parent: 'china002',
                },
                {
                  label: '广西002',
                  value: 'gx002',
                  parent: 'china002',
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

新组件

1. 弃用的props：

2. 替换的props：

   • limit => colLimit

3. 新增的props：colFixed

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
maskClosable	点击蒙层是否可触发关闭	Boolean	false
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
round	是否圆角	boolean	false
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
title	标题	string	-
cancelText	第一个按钮文本	string	'取消'
clearText	第二个按钮文本	string	'清空'
extraText	第三个按钮文本	string	-
confirmText	第四个按钮文本	string	'确定'
data	要显示的数据，内容如下data子配置项所示	array	[]
alias	data中数据别名, 默认{value: 'value', label: 'label', parent:'parent', children:'children'}	object	{}
value	选中的数据	array	[]
itemTitle	数据列标题，数量应和data一致	array	[]
colLimit	显示的数据列数	number	-
colFixed	当colLimit有值生效，是否当数据列数少于colLimit进行空白占位	boolean	false
flat	data是否是平铺结构，若为true则将会在内部转成树状结构	boolean	true

• data 子配置项

属性	说明	类型	默认值
value	id	string|number	-
label	name	string|number|boolean	-
parent	父节点的value, !parent = true 视为顶级节点	string|number	-
children	子节点数据	array	-

平铺结构 即 flat = true 将会在内部转成树状结构

let data = [
 {
 value:1,
 label:'父节点'
 parent:0,
 },
 {
 value:11,
 label:'子节点'
 parent:1,
 }
]

树状结构 即 flat = false

let data = [
 {
 value:1,
 label:'父节点'
 parent:0,
 children:[
 {
 value:11,
 label:'子节点'
 parent:1,
 }
 ]
 },
]

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
select	当点击确认按钮或清空按钮时的回调	(selected, selectedLabel, selectedIndex)
cancel	当点击取消按钮及蒙层回调	-
extra	点击第三个按钮回调	-