更新记录

1.0.0（2020-07-14） 下载此版本

aui-picker城市多级联动插件首次发布

平台兼容性

aui-picker 多级联动

• 支持多端——h5、app、微信小程序、支付宝小程序...
• 支持自定义配置picker插件级数
• 支持无限级

使用时请下载查看完整示例

注意事项：插件传入数据格式为children树形格式，内部包含：id、name

插件显示：

_this.$refs.picker.open().then(function(){
    console.log('picker打开');
});

插件引入示例：

<view class="aui-btn aui-btn-blue" @click.stop="showPicker($event)">picker无限级联动</view>
<aui-picker 
    ref="picker" 
    :title="auiPicker.title"
    :layer="auiPicker.layer"
    :data="auiPicker.data"
    @callback="pickerCallback"
></aui-picker>

import {aui} from '@/common/aui/js/aui.js';
import auiPicker from '@/components/aui-picker/aui-picker.vue';
export default {
    components: {
        auiPicker
    },
    data() {
        return {
            auiPicker: {
                title: 'picker多级联动',
                layer: null,
                data: []
            },
        }
    },
    methods: {
        //显示picker多级联动弹窗
        showPicker(e){
            const _this = this;
            _this.auiPicker.layer = null;
            _this.auiPicker.data=[{
                id: "1001",
                name: "一级菜单1",
                children: [{
                    id: "1002",
                    name: "二级菜单1-1",
                    children: [{
                        id: "1003",
                        name: "三级菜单1-1",
                        children: [{
                            id: "1004",
                            name: "四级菜单1-1"
                        }]
                    }]
                }]
            },
            {
                id: "1005",
                name: "一级菜单2",
                children: [{
                    id: "1006",
                    name: "二级菜单2-1",
                    children: [{
                        id: "1007",
                        name: "三级菜单2-1",
                        children: [{
                            id: "1008",
                            name: "四级菜单2-1"
                        }]
                    }]
                }]
            }];
            _this.$refs.picker.open().then(function(){
                console.log('picker打开');
            });
        },
        //picker多级联动回调
        pickerCallback(e){
            const _this = this;
            console.log(e);
            let result = '';
            e.data.forEach(function(item, index){
                result += item.name + '   ';
            });
            uni.showModal({
                title: '提示',
                content: result,
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
    }
}