NewZkgj/components/pickerMultiSelect/pickerMultiSelect.vue

<template>
<view>
<!-- components/pickerMultiSelect.wxml -->
<!-- <view class='showPicker' bindtap='showPicker'>MyPicker</view> -->
<view class="list" @tap="showPickerFun">
		<view class="listName">{{title}}</view>
		<view class="listName2">{{value}}</view>
		<image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/qf/more.png" class="listImg"></image>
</view>
<view :class="showPicker ? 'shade-container' : 'hide-container'" v-if="firstShow">
		<view class="left-shade" @tap="hidePicker"></view>
		<view class="right-choose">
				<view class="button-container">
						<view class="cancal" @tap="cancal">取消</view>
						<view class="sure" @tap="sure">确定</view>
				</view>
				<view class="picker-container">
						<view v-for="(item, index) in myChooseList" :key="index" :class="'picker-item ' + ( item.flag ? 'picker-item-choose' : '' )" @tap="chooseItem" :data-value="item.value">
								{{ item.label }}
						</view>
				</view>
		</view>
</view>
</view>
</template>

<script>
// components/pickerMultiSelect.js

export default {
  data() {
    return {
      showPicker: false,
      firstShow: false,
      myList: this.list,
      myChooseList:[],
      flag: false
    };
  },

  components: {},
  mounted(){
    this.myChooseList=this.chooseList;
  },
  props: {
    chooseList: {
      type: Array
    },
    multiple: {
      type: Boolean
    },
    title: {
      type: String
    },
    value: {
      type: String
    },
    list: {
      type: Array||String
    }
  },
  methods: {
    // 点击picker元素事件	
    chooseItem(e) {
      if (this.multiple) {
        // 多选事件
        let val = e.target.dataset.value;
        let arr = this.myChooseList;
        let flag = '';
        let index = null;

        for (let i = 0, len = arr.length; i < len; i++) {
          if (arr[i].value == val) {
            index = i;
            flag = `chooseList[${i}].flag`;
          }
        }

        if (!this.myChooseList[index].flag) {
          this.setData({
            [flag]: true
          });
        } else {
          this.setData({
            [flag]: false
          });
        }
      } else {
        // 单选事件
        let val = e.target.dataset.value;
        let arr = this.myChooseList;
        let flag = '';
        let index = null;

        for (let i = 0, len = arr.length; i < len; i++) {
          index = i;
          flag = `chooseList[${i}].flag`;

          if (arr[i].value == val) {
            this.setData({
              [flag]: true
            });
          } else {
            this.setData({
              [flag]: false
            });
          }
        }
      }
    },

    // 展示picker
    showPickerFun() {
      this.myChooseList=this.chooseList
      if (!this.firstShow) {
        this.setData({
          firstShow: true
        });
      }

      this.setData({
        showPicker: true
      }); // 加载时重新渲染已选择元素

      let arr = this.myChooseList;
      let array = this.myList;
      let flag = '';
      let index = null;

      for (let i = 0, len = arr.length; i < len; i++) {
        index = i;
        flag = `chooseList[${i}].flag`;

        if (!array.includes(arr[i].value)) {
          this.setData({
            [flag]: false
          });
        } else {
          this.setData({
            [flag]: true
          });
        }
      }
    },

    // 隐藏picker
    hidePicker() {
      this.setData({
        showPicker: false
      });
    },

    // 取消按钮事件
    cancal() {
      this.hidePicker();
    },

    // 确定按钮事件
    sure() {
      var list = [];

      for (let item of this.myChooseList) {
        if (item.flag) {
          list.push(item.value);
        }
      }

      this.setData({
        myList:list
      });
      this.hidePicker();
      this.$emit('chooseEvent', {
        detail: {
          chooseArray: this.myList
        }
      });
    }

  }
};
</script>
<style>
@import "./pickerMultiSelect.css";
</style>