一款可以支持多选的uni-app H5端PopupSelect

<template>
  <u-popup :safe-area-inset-bottom="true" class="select-popup" mode="bottom" v-model="show" @close="close">
    <view class="select-popup-header">
      <view class="popup-cancel">
        <u-button
            type="primary"
            size="medium"
            @click="cancel"
        >取消</u-button></view>
      <view v-if="title" class="title">{{ title }}</view>
      <view class="popup-confirm">
        <u-button
            type="primary"
            size="medium"
            @click="confirm"
        >确定</u-button></view>
    </view>
    <view class="select-popup-content">
      <scroll-view scroll-y="true" class="select-popup-scroll">
        <u-radio-group :wrap="true" v-model="id" @change="radioGroupChange">
          <u-radio
              v-for="(item, index) in list"
:key="((props.value && item[props.value]) || item.value) + `-${index}`"

              :name="(props.value && item[props.value]) ? item[props.value].toString() : item.value || item.value === 0 ? item.value.toString() : ''"
          >
            <view>
              <view :class="{'main-label': otherLabel}">{{item.label || item[props.label]}}</view>
              <view class="other-label" v-if="otherLabel">{{ item[otherLabel] }}</view>
            </view>
          </u-radio>
        </u-radio-group>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'PopupSelect',
  props: {
    // 显示
    visible: {
      type: Boolean,
      default: false
    },

    // 显示
    value: {
      type: [Number, String],
      default: ''
    },
    // 列表数据
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 标题
    title: {
      type: String,
      default: ''
    },

    // 次label
    otherLabel: {
      type: String,
      default: ''
    },

    // 配置选项
    props: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      id: null
    }
  },
  watch: {
    value: function(val) {
      if (val) {
        this.id = val
      }
    }
  },
  computed: {
    show: {
      get() {
        return this.visible
      },
      set(val) {
        console.log(val)
      }
    }
  },
  created() {
    this.id = this.value
  },
  onLoad() {

  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {

  },
  methods: {
    // select变化
    radioGroupChange(value) {
      this.id = value
      console.log('this.job', this.id)
    },

    // 关闭
    close() {
      this.$emit('update:visible', false)
    },

    // 取消
    cancel() {
      this.close()
      this.id = this.value
    },

    // 确定
    confirm() {
      this.close()
      const jobMap = {}
      for (const item of this.list) {
        jobMap[(this.props.value && item[this.props.value]) || item.value] = item
      }
      const obj = jobMap[this.id]
      this.$emit('confirm', obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .select-popup {
    /deep/ .u-drawer-content {
      padding-bottom: 10px;
    }

    .select-popup-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
      background: #ffffff;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 34rpx;
      }

      .popup-confirm, .popup-cancel {
        /deep/ .u-primary-hover {
          opacity: 0.7;
        }
        /deep/ .u-btn {
          background: #fff !important;

          &:after {
            border: none;
          }
        }
      }
      .popup-confirm {
        /deep/ .u-btn {
          color: $uni-color-primary;
          background: #fff !important;
        }
      }
      .popup-cancel {
        /deep/ .u-btn {
          color: $uni-text-color;
          background: #fff !important;
        }
      }
    }
    .select-popup-content {
      margin-top: 40px;

      .select-popup-scroll {
        max-height: 50vh;
        min-height: 40vh;
        overflow: auto;
        display: flex;
        align-items: center;
      }

      .u-radio-group {
        width: 100%;
        display: block;
        .u-radio {
          text-align: center;
          /deep/ .u-radio__icon-wrap {
            display: none;
          }
          /deep/ .u-radio__icon-wrap--checked + .u-radio__label, /deep/ .u-radio__icon-wrap--checked + .u-radio__label .other-label {
            color: $uni-color-primary;
          }
          /deep/ .u-radio__label {
            display: block;
            min-height: 40px;
            line-height: 40px;
            width: 100%;
            margin: 0;
            padding: 0 40rpx;
            cursor: pointer;
          }
        }
      }
      .main-label {
        font-size: 30rpx;
        font-weight: 500;
      }
      .other-label {
        height: 40rpx;
        line-height: 16rpx;
        color: #bfbfbf;
        border-bottom: 2rpx solid #e4e7ed;
      }
    }
  }
}
</style>