更新记录

1.0.0（2021-05-20） 下载此版本

发布组件

平台兼容性

z-multi-choose 底部多选弹层 使用说明

使用示例

<template>
    <view class="content">
        <view @tap="control = true">
            点我弹窗
        </view>
        <z-multi-choose activeColor="red" idKey="uid" showKey="name" :list="list" :show="control" @maskTouch="cancle" @sure="sure" @cancle="cancle"></z-multi-choose>
    </view>
</template>

<script>
import zMultiChoose from '@/components/z-multi-choose/z-multi-choose.vue';
export default {
    data() {
        return {
            control:false,
            list:[
                {
                    name: '冉遗',
                    uid: 1,
                },
                {
                    name: '毕方',
                    uid: 2
                },{
                    name:'鸾鸟',
                    uid:3
                }
                ,{
                    name:'玃如',
                    uid:4
                }
                ,{
                    name:'溪边',
                    uid:5
                }
                ,{
                    name:'文鳐',
                    uid:6
                }
                ,{
                    name:'白雉',
                    uid:7
                },{
                    name:'白泽',
                    uid:8
                }
            ]
        };
    },
    components: {
        zMultiChoose
    },
    methods: {
        cancle(){
            this.control = false
        },
        sure(e){
            console.log(e)
            this.control = false
        }
    }
};
</script>

<style>

</style>

参数说明

备注

你可以直接把请求回来的对象数组扔进来，但是，你要确保数组的每个对象都有唯一性的字段用于标识，设置 showKey、idKey 就可以开始使用插件了

list示例

list:[ { name: '冉遗', uid: 1, }, { name: '毕方', uid: 2 } ]

showKey 应传 'name' ，idKey 应传 'uid'

@sure 事件回传参数

idArr 数组，用户选中的唯一性字段的值

textArr 数组，用户选中的展示的值