Vue封装Vant选择器组件

由于Vant原生的选择器组件只支持值列表的数据，而不支持键值对列表的数据，并且使用较为麻烦，于是对Vant的选择器组件进行了封装。

封装组件代码

<template>
  <!-- 封装vant的选择器 -->
  <div>
    <van-field
      readonly
      clickable
      name="picker"
      :value="text"
      :label="label"
      :placeholder="placeholder"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    //[{key:key1,value:value1},{key:key2,value:value2},...}]
    data: {
      default: null,
      type: Array
    },
    value: {
      default: "",
      type: [String,Number]
    },
    label: {
      default: "选择器",
      type: String
    },
    placeholder: {
      default: "点击选择",
      type: String
    }
  },
  computed: {
    columns() {
      let values = this.data.map(item => {
        return item.value;
      });
      return values;
    }
  },
  data() {
    return {
      showPicker: false,
      text: ""
    };
  },
  methods: {
    onConfirm(value, index) {
      let key = this.data[index].key;
      this.text = value;
      this.$emit("input", key);
      this.showPicker = false;
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val == "" || val == undefined) {
          this.text = "";
        }
        deep: true;
      },
    },
  },
};
</script>

使用方法

<template>
  <div>
    <my-vant-pcker
      v-model="value"
      :data="data"
      label="城市选择"
      placeholder="请选择城市"
    ></my-vant-pcker>
  </div>
</template>
<script>
import MyVantPcker from "@/components/MyVantPcker";
export default {
  components: { MyVantPcker },
  data() {
    return {
      value: "",
      data: [
        {
          key: "hangzhou",
          value: "杭州"
        },
        {
          key: "shanghai",
          value: "上海"
        },
        {
          key: "beijing",
          value: "北京"
        }
      ]
    };
  }
};
</script>