iView经典组件剖析

级联选择组件 Cascader

级联选择是网页中常见的表单类控件，主要用于省市区、公司级别、事务分类等关联数据集合的选择。

Cascader 接收一个 prop：data 作为选择面板的数据源，使用 v-model 可以双向绑定当前选择的项。 上图所示的级联选择组件示例代码如下：

<template>
    <Cascader :data="data" v-moduel="value"></Cascader>
</template>

<script>
    data () {
        return {
            value: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
            data: [{
                value: 'beijing',
                label: '北京',
                children: [
                    {
                        value: 'gugong',
                        label: '故宫'
                    },{
                        value: 'tiantan',
                        label: '天坛'
                    },{
                        value: 'wangfujing',
                        label: '王府井'
                    }
                ]
            },{
                value: 'jiangsu',
                label: '江苏',
                children: [
                    {
                        value: 'nanjing',
                        label: '南京',
                        children: [
                            {
                                value: 'fuzimiao',
                                label: '夫子庙'
                            }
                        ]
                    },
                    {
                        value: 'suzhou',
                        label: '苏州',
                        children: [
                            {
                                value: 'zhuozhengyuan',
                                label: '拙政园'
                            },
                            {
                                value: 'shizilin',
                                label: '狮子林'
                            }
                        ]
                    }
                ]
            }]
        }
    }
</script>

data 中的 label 是面板显示的内容， value 是它对应的值， children 是它的子集， 可以递归。 v-model 绑定一个数组， 每一项对应 data 里的 value。

开发一个通用组件最重要的是定义 API， Vue 组件的 API 来自 3 部分：prop、slot 和 event。

从功能上考虑， 先来定义 Cascader 的 prop.

• data：决定了级联面板的内容。
• value：当前选择项， 可使用 v-model.
• disabled：是否禁用。
• clearable：是否可清空。
• placeholder：占位提示。
• size：尺寸
• trigger：触发方式 （点击或鼠标滑入）。
• changeOnSelect： 选择即改变。
• renderFormal：自定义显示内容。

对应的代码如下:

//	cascader.vue
<script>
	export default {
        props: {
            data: {
                type: Array,
                default () {
                    return [];
                }
            },
            value: {
                type: Array,
                default () {
                    return [];
                }
            },
            disabled: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            size: {
                validator (value) {
                    return oneOf(value, ['small','large']);
                }
            },
            trigger: {
                validator (value) {
                    return oneOf(value, ['click', 'hover']);
                },
                default: 'click'
            },
            changeOnSelect: {
                typeL Boolean,
                default: false
            },
            renderFormat: {
                type: Function,
                default (label) {
                    return label.join('/');
                }
            }
        }
	}
</script>

Cascader 的核心是用到了组件递归. 使用组件递归必不可少的两个条件是有 name 选项和在适当的时候结束递归.

图中所示的级联选择面板每一列都是一个组件 Caspanel (caspanel.vue), data 中 children 决定了每项的子集, 也就是需要递归显示 Caspanel 的数量.

//	caspanel.vue
<template>
    <span>
        <ul v-if="data && data.length" :class="[prefixCls + '-menu']">
            <Casitem
                v-for="item in data"
                :key="item"
                :prefix-cls="prefixCls"
                :data="item"
                :tmp-item="tmpItem"
                @click.native.stop="handleClickItem(item)"
                @mouseenter.native.stop="handleHoverItem(item)"></Casitem>
        </ul>
        <Caspanel 
            v-if="sublist && sublist.length"
            :prefix-cls="prefixCls"
            :data="sublist"
            :disabled="disabled"
            :trigger="trigger"
            :change-on-select="changeOnSelect"></Caspanel>
    </span>
</template>

<script>
    import Casitem from './casitem.vue';

    export default {
        name: 'Caspanel',
        components: { Casitem },
        props: {
            data: {
                type: Array,
                default () {
                    return [];
                }
            },
            disabled: Boolean,
            changeOnSelect: Boolean,
            trigger: String,
            prefixCls: String
        },
        data () {
            return {
                tmpItem: {},
                result: [],
                sublist: []
            };
        },
        watch: {
            data () {
                this.sublist = [];
            }
        }
    }

</script>