ebiz-h5/src/components/ebiz/FieldPicker.vue

<template>
  <div class="date-picter">
    <van-field readonly clickable :label="label" :value="fieldData" :placeholder="placeholder" @click="showPicker = true" :required="required">
      <div slot="button" :class="{ tea_arrowDown: !showPicker, tea_arrowUp: showPicker }">
        <van-icon name="arrow-down" slot="button" />
      </div>
    </van-field>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker :columns="columns" :default-index="defaultIndex" :valueKey="valueKey" @change="change" />
    </van-popup>
  </div>
</template>
<script>
import { Field, Popup, Picker, Icon } from 'vant'

export default {
  name: 'FieldPicker',
  props: {
    label: {
      type: String,
      default: '11'
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },

    required: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {}
    },
    //选项对象中，文字对应的 key
    valueKey: {
      type: String,
      default: 'text'
    },
    keyId: {}
  },
  data() {
    return {
      currentDate: new Date(),
      showPicker: false,

      defaultIndex: 0,
      columns: [],

      keyData: [],
      type: 0, //0:普通数组 1：对象数组,
      fieldData: ''
    }
  },
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Icon.name]: Icon
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    /**
     * 初始化
     */

    init() {
      this.columns = this.data
      if (this.columns.length > 0) {
        let arrayType = typeof this.columns[0]
        //传入的是对象数组
        if (arrayType == 'object') {
          this.type = 1
        } else {
          this.type = 0
        }
        //获得默认选中的index
        if (this.value) {
          for (let i in this.columns) {
            if (this.type == 0 && this.columns[i] == this.value) {
              this.defaultIndex = i - 0
              this.fieldData = this.columns[i]
              break
            } else if (this.type == 1 && this.columns[i][this.keyId] == this.value) {
              this.defaultIndex = i - 0
              this.fieldData = this.columns[i][this.valueKey]
              break
            }
          }
        }
      }
    },

    change(picker, value, index) {
      this.fieldData = value
      if (this.type == 0) {
        this.$emit('update:value', value)
      } else {
        this.$emit('update:value', this.columns[index][keyId])
      }
      this.$emit('on-change', value, index)
      this.showPicker = false
    },

    cancel() {
      this.showPicker = false
      this.$emit('cancel', '')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>