百度智能小程序 級(jí)聯(lián)組件

cascade 級(jí)聯(lián)組件

解釋：多級(jí)選擇組件，為開(kāi)發(fā)者提供級(jí)聯(lián)選擇功能，默認(rèn)為三級(jí)。比如：省/市/區(qū)。該組件包括左側(cè)標(biāo)簽欄，以及右側(cè)多個(gè) picker（從底部彈起的滾動(dòng)選擇器）。支持配置左側(cè)標(biāo)簽寬度，并提供自定義樣式，可供開(kāi)發(fā)者進(jìn)行定制。

屬性說(shuō)明

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例

<!--四字標(biāo)題-->
<smt-cascade
    range="{{multiArray1}}"
    label="四字標(biāo)題"
    range-key="name"
    bind:change="change"
    placeholder="{{['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)']}}"
></smt-cascade>
<!--配置無(wú)下邊框-->
<smt-cascade
    range="{{multiArray2}}"
    label="無(wú)下邊框""
    range-key="name"
    noborder="true"
    bind:change="change"
></smt-cascade>
<!--配置label-width-->
<smt-cascade
    range="{{multiArray3}}"
    label="六字標(biāo)題排版"
    range-key="name"
    label-width="6em"
    bind:change="change"
    placeholder="{{['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)']}}"
></smt-cascade>
<!--配置tips-->
<smt-cascade
    range="{{multiArray4}}"
    label="配置未點(diǎn)擊時(shí)提示"
    range-key="name"
    bind:change="change"
    tips="{{['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)']}}"
></smt-cascade>
<!--配置回填數(shù)據(jù)-->
<smt-cascade
    range="{{multiArray5}}"
    label="回填"
    value="{{[1, 2, 1]}}"
    range-key="name"
    bind:change="change"
    placeholder="{{['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)']}}"
></smt-cascade>
<!--配置禁用-->
<smt-cascade
    range="{{multiArray6}}"
    label="禁用型"
    range-key="name"
    disabled
    bind:change="change"
    placeholder="{{['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)']}}"
></smt-cascade>
<!--外部樣式類-->
<smt-cascade
    range="{{multiArray7}}"
    label="externalClasses"
    cascade-picker="cascade-picker"
    cascade-label="cascade-label"
    cascade-content="cascade-content"
    cascade-picker-content="cascade-picker-content"
    range-key="name"
    bind:change="change"
    placeholder="{{['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)']}}"
></smt-cascade>

// 初始化級(jí)聯(lián)組件數(shù)組內(nèi)容
const initMultiArray = [
    [
        {
            name: '北京市',
            value: 1
        },
        {
            name: '山西省',
            value: 2
        },
        {
            name: '黑龍江省',
            value: 3
        }
    ],
    [],
    []
];
// 整個(gè)級(jí)聯(lián)組件數(shù)組內(nèi)容
const multiArray = [
    {
        name: '北京市',
        value: 1,
        children: [{
            name: '北京市',
            value: 1,
            children: [{
                name: '海淀區(qū)',
                value: 1
            }, {
                name: '大興區(qū)',
                value: 2
            }, {
                name: '朝陽(yáng)區(qū)',
                value: 3
            }]
        }]
    },
    {
        name: '山西省',
        value: 2,
        children: [{
            name: '太原市',
            value: 1,
            children: [
                {
                    name: '小店區(qū)',
                    value: 1
                }, {
                    name: '迎澤區(qū)',
                    value: 2
                }, {
                    name: '杏花嶺區(qū)',
                    value: 3
                }
            ]
        }, {
            name: '大同市',
            value: 2,
            children: [{
                name: '南郊區(qū)',
                value: 1
            }, {
                name: '新榮區(qū)',
                value: 2
            }, {
                name: '陽(yáng)高區(qū)',
                value: 3
            }]
        }, {
            name: '呂梁市',
            value: 3,
            children: [{
                name: '孝義市',
                value: 1
            }, {
                name: '離石市',
                value: 2
            }, {
                name: '汾陽(yáng)市',
                value: 3
            }]
        }]
    },
    {
        name: '黑龍江省',
        value: 3,
        children: [{
            name: '哈爾濱市',
            value: 1,
            children: [{
                name: '道里區(qū)',
                value: 1
            }, {
                name: '南崗區(qū)',
                value: 2
            }, {
                name: '太平區(qū)',
                value: 3
            }]
        }, {
            name: '齊齊哈爾市',
            value: 2,
            children: [{
                name: '龍沙區(qū)',
                value: 1
            }, {
                name: '建華區(qū)',
                value: 2
            }, {
                name: '鐵鋒區(qū)',
                value: 3
            }]
        }, {
            name: '大慶市',
            value: 3,
            children: [{
                name: '龍鳳區(qū)',
                value: 1
            }, {
                name: '紅崗區(qū)',
                value: 2
            }, {
                name: '林甸縣',
                value: 3
            }]
        }]
    }
];
/* global Page, swan */
Page({ // eslint-disable-line
    data: {
        // 級(jí)聯(lián)選擇數(shù)組
        multiArray1: initMultiArray,
        multiArray2: initMultiArray,
        multiArray3: initMultiArray,
        multiArray4: initMultiArray,
        multiArray6: initMultiArray,
        multiArray7: initMultiArray,
        // 回填數(shù)據(jù)
        multiArray5: [
            [{
                name: '山西省',
                value: 1
            }],
            [{
                name: '太原市',
                value: 1
            }, {
                name: '大同市',
                value: 2
            }, {
                name: '呂梁市',
                value: 3
            }],
            [{
                name: '小店區(qū)',
                value: 1
            }, {
                name: '迎澤區(qū)',
                value: 2
            }, {
                name: '杏花嶺區(qū)',
                value: 3
            }]
        ],
        // 占位文案
        placeholder: ['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)'],
        // 提示文案
        tips: ['請(qǐng)選擇省', '請(qǐng)選擇市', '請(qǐng)選擇區(qū)'],
        // 是否更改label顏色
        changeLabelColor: true,
        // 需要更改的顏色，配合changeLabelColor: true使用
        labelColor1: '#2772fb',
        labelColor2: '#f7534f'
    },

    /**
    * 動(dòng)態(tài)設(shè)置當(dāng)前點(diǎn)擊的是第幾個(gè)級(jí)聯(lián)組件
    *
    * @param {Object} event 點(diǎn)擊對(duì)象
    */
    bindtap(event) {
        const index = event.currentTarget.dataset.index;
        this.setData({
            currentIndex: index
        });
    },

    /**
    * value 改變時(shí)觸發(fā) change 事件
    *
    * @param {Object} event picker選擇對(duì)象
    */
    change(event) {
        const value = event.detail.value;
        const length = value.length;
        if (length > 2) {
            return;
        }
        // 記錄是第幾個(gè)cascade
        const index = this.data.currentIndex;
        const multiArrayKey = `multiArray${[index]}`;
        let multiArrayData = this.data[`multiArray${[index]}`];
        const subArray = multiArray[value[0]].children;
        swan.showLoading({
            title: '正在加載...',
            mask: true
        });
        // 500ms之后，隱藏loading提示，同時(shí)更新級(jí)聯(lián)數(shù)據(jù)
        setTimeout(() => {
            swan.hideLoading();
            multiArrayData[length] = length === 1 ? subArray : subArray[value[1]].children;
            this.setData(multiArrayKey, multiArrayData);
        }, 500);
    }
});

/* 外部樣式類 */
.cascade-label,
.cascade-picker-content  {
    color: #6495ed;
}

{
    "usingComponents": {
        "smt-cascade": "@smt-ui/component/src/cascade"
    }
}