更新记录

1.0.0（2021-01-28） 下载此版本

1、简单易用选择，支持多选、单选； 2、支持H5、小程序 （其他暂无测试）

平台兼容性

兼容性

适用H5、小程序等

依赖组件

uni-popup uni-transition

使用说明

<template>
<view class="content">
        <view class="text-area">
            <text class="title" @tap="showPopup">{{memberSelected.length ? memberSelected.join(",") : '请选择'}}</text>
        </view>
        <uni-popup ref="popup" type="bottom">
            <tongtong-select :isMultiple="isMultiple" :list="memberList" :defaultValue="memberSelected" showParam="name" @cancel="cancelFun"
             @change="memberChange">
            </tongtong-select>
        </uni-popup>
    </view>
</template>

import tongtongSelect from '@/components/tongtong-select/tongtong-select.vue';
export default {
  data() {
    return {
        isMultiple: true,
        memberSelected: ['张三'],
        //会员list数据
        memberList: [],
    }
  },
  components: {
    tongtongSelect,
  },
  onLoad() {
    //模拟数据加载
    setTimeout(() => {
        this.memberList = [{
                name: '张三',
                id: 1,
                type: 1,
            },
            {
                name: '李四',
                id: 2,
                type: 2,
            },
            {
                name: '王五',
                id: 3,
                type: 3,
            },
        ];
    }, 1500);
  },
  methods: {
    //显示
    showPopup() {
        this.$refs.popup.open();
    },
    cancelFun() {
        this.$refs.popup.close();
    },
    //多选确认后
    memberChange(callBackObj) {
        console.log(callBackObj);
        this.memberSelected = [];
        callBackObj.selectedList.map(item => {
            this.memberSelected.push(item.name);
        });
        this.cancelFun();
    },
  }
};

属性说明

result返回值说明

selectedList 返回选择数据的数组对象