uniapp vuiew组件u-picker增加多选

uniapp其中u-picker或u-select不支持多选只支持单选。
参考 uniapp uView picker组件多选封装改造_uview多选-CSDN博客
调整了候选搜索输入框、原文链接中v-model改为了:show=”show"引起的点击无反应（也可能基于uview1而示范uview2区别）、取消了watch导致的多次引入会影响每个组件选中

开启输入框，根据sholder="请输入xx"存在就开启，根据实际情况自行修改。

<template>
  <view class="g-picker">
    <view class="g-picker-value" @click.native="showPicker">
      <u-input
        v-model="value"
        disabled
        disabledColor="#fff"
        :inputAlign="inputAlign"
        :placeholder="placeholder"
        style="pointer-events: none"
      >
      </u-input>
      <u-icon
        v-if="!disabled"
        class="u-margin-left-16"
        name="/static/arror-right.png"
        size="10"
      ></u-icon>
    </view>
    <u-popup mode="bottom" v-model="show" length="50%">
      <view class="g-picker-con">
        <view class="g-picker-operate u-flex">
          <text @click="show = false">取消</text>
          <!-- 搜索 -->
          <u-input
            height="60"
            v-if="sholder"
            border
            class=" u-margin-left-60 u-margin-right-60 u-margin-top-8 u-flex-1"
            v-model="keyword"
            :placeholder="sholder"
          />
          <text @click="confirm">确认</text>
        </view>
        <scroll-view scroll-y="true" class="g-picker-list">
          <view
            class="g-picker-item"
            v-for="(col, i) in filterList"
            :key="i"
            @click="checkItem(col, i)"
          >
            <view
              :class="['g-picker-item_label', col._check ? 'g-picker-item--actived' : '']"
              :style="{ color: col._check ? activedColor : '#333' }"
              >{{ col[filter.label] }}</view
            >
            <u-icon
              class="g-picker-item_icon"
              v-show="col._check"
              name="checkbox-mark"
              :color="activedColor"
            ></u-icon>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // v-for循环中时告诉是哪次循环
    index: {
      type: [String, Number],
      default: '0'
    },
    // picker组件绑定值，默认 name 用，拼接
    value: {
      type: String,
      default: ''
    },
    // 数据源
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 数据显示格式化
    filter: {
      type: Object,
      default: () => {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    // 是否开启搜索且搜索提示语
    sholder: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 选中后颜色
    activedColor: {
      type: String,
      default: '#18C183'
    },
    // 文本对齐方式
    inputAlign: {
      type: String,
      default: 'right'
    },
    // 默认提示
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      keyword: '',
      show: false,
      columnsList: [],
      value_chx: []
    }
  },
  computed: {
    filterList() {
      return this.keyword
        ? this.columnsList.filter(item => {
            return item.label.indexOf(this.keyword) != -1
          })
        : this.columnsList
    }
  },
  methods: {
    showPicker() {
      if (this.disabled) return
      this.reShow()
      this.keyword = ''
      this.show = true
    },
    reShow() {
      let data = this.value.split(',')
      let isAll = this.value === '全部'
      this.columnsList = this.columns.map(item => {
        return item
      })
      for (let val of this.columnsList) {
        if (isAll) {
          this.$set(val, '_check', true)
        } else {
          if (data.includes(val[this.filter.label])) {
            this.$set(val, '_check', true)
          } else {
            this.$set(val, '_check', false)
          }
        }
      }
    },
    checkItem(col, inx) {
      // 考虑候选有全部时 其余全勾选/全不勾选
      if (col.label === '全部') {
        this.columnsList.forEach(item => {
          if (item.label !== '全部') {
            this.$set(item, '_check', !col._check)
          }
        })
        col._check = !col._check
      } else {
        col._check = !col._check
        let obj = this.columnsList.find(item => {
          return item.label === '全部'
        })
        if (obj) {
          obj._check = this.columnsList.find(item => {
            if (item.label === '全部') {
              return false
            }
            return !item._check
          })
            ? false
            : true
        }
      }
    },
    // close() {
    //  this.show = false
    //  this.$emit("close")
    // },
    confirm() {
      let value = [],
        label = []
      this.value_chx = this.columns.filter(v => v._check)
      for (let val of this.value_chx) {
        value.push(val[this.filter.value])
        label.push(val[this.filter.label])
      }
      this.show = false
      this.$emit('confirm', this.value_chx, value, label, this.index)
      this.$emit('change', label.join(','))
    }
  }
}
</script>
<style lang="scss" scoped>
.g-picker {
  .g-picker-value {
    display: flex;
  }

  .g-picker-con {
    position: relative;
    color: #333;
    font-size: 28rpx;

    .g-picker-operate {
      align-items: center;
      justify-content: space-between;
      height: 80rpx;
      padding: 0 32rpx;

      text {
        color: #666;

        &:last-child {
          color: #18c183;
        }
      }
    }

    .g-picker-list {
      min-height: 30vh;
      max-height: 60vh;
      height: calc(50vh - 80rpx);
      .g-picker-item {
        position: relative;
        width: 100%;
        height: 80rpx;

        .g-picker-item_label {
          width: 66%;
          margin: 0 auto;
          text-align: center;
          line-height: 80rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .g-picker-item--actived {
          font-weight: 600;
        }

        .g-picker-item_icon {
          position: absolute;
          top: 50%;
          right: 40rpx;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>