ebiz-h5/src/components/common/PopupSelector.vue

<template>
  <div class="thin-bottom mb1" @click.native="showPopup">
    <van-field v-bind="$attrs" right-icon="arrow" :value="value" :required="required" :readonly="readonly" />
    <van-popup id="popup" :value="isShow" :position="position" @click-overlay="closePopup">
      <slot :closePopup="closePopup">
        <van-picker id="picker" show-toolbar :columns="columns" @confirm="onPickerConfirm" @cancel="closePopup" />
      </slot>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'PopupSelector',
  props: {
    value: {
      type: String
    },
    position: {
      type: String,
      default: 'bottom'
    },
    columns: {
      type: Array,
      default() {
        return ['暂无数据']
      }
    },
    required: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    showPopup() {
      this.isShow = true
    },
    closePopup() {
      this.isShow = false
    },
    onPickerConfirm(pickedValue) {
      this.$emit('input', String(pickedValue))
      this.closePopup()
    }
  }
}
</script>

<style lang="scss">
#app .van-picker__cancel,
#app .van-picker__confirm {
  color: #1989fa;
}
</style>