更新记录

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();
    },
  }
};

属性说明

属性名 类型 默认值 说明
list Array [] 数据 必填
showParam String name 需展示数据字段key 必填
isMultiple Boolean true 是否多选 选填
defaultValue Array [] 默认显示数据 注:需是key对应的value值 选填
title String '' title名
@cancal Fun 取消
@change Fun 确定后选择数据

result返回值说明

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问