【实战经验】vant中picker选择器封装，让你的表单选择更简单

前言

对于选择器组件，vant 中的 picker 组件是一个非常合适的选择。它不仅提供了灵活的配置选项，还可以很方便地与其他 vant 组件结合使用，帮助我们快速搭建出漂亮、易用的移动端页面。在本文中，我将为大家介绍如何基于 vant 的 picker 组件进行二次封装，以便更好地满足实际的业务需求。

---

实现思路

1. 首先定义一个子组件页面用来封装选择器；
2. 在父组件中(使用的页面)引入封装组件(子组件)并注册，然后在页面中使用，在父组件中给标签(注册的组件名)上绑定多个属性， 属性上挂载需要传递的值，通过 props 在子组件(封装文件)接收数据；
3. 在子组件中自定义确定的事件，调用这个事件后，子组件通过 this.$emit('自定义事件名',要传递的数据) 发送父组件可以监听的数据，最后父组件监听子组件事件，调用事件并接收传递过来的数据。

定义的参数

参数	描述
selectValue	绑定值 model
keyValue	绑定的 key 字段
keyLabel	绑定的 value 字段
columns	绑定的 option 数据源
required	是否显示红色 * 校验
rules	校验规则
required	是否必填
confirm	选中的回调函数

---

封装文件

<template>
  <div>
    <van-field v-model="textValue" v-bind="$attrs" :name="$attrs.name" :rules="rules" :required="required" :readonly="readonly"
      :is-link="islink" @click="show = !show" />
    <van-popup v-model="show" get-container="body" position="bottom">
      <van-picker :columns="columns" show-toolbar :value-key="keyValue" :title="$attrs.label" @cancel="show = !show" @confirm="onConfirm">
        <template #option="option">
          {{ option[keyLabel] }}
        template>
      van-picker>
    van-popup>
  div>
template>

<script>
export default {
  props: {
    required: {
      type: Boolean,
    },
    readonly: {
      type: Boolean,
    },
    islink: {
      type: Boolean,
    },
    columns: {
      type: Array,
    },
    rules: {
      type: Array,
    },
    selectValue: {
      type: String,
    },
    keyValue: {
      type: String,
    },
    keyLabel: {
      type: String,
    },
  },
  data() {
    return {
      show: false,
      textValue: "",
      selectOptions: [],
    };
  },
  methods: {
    onConfirm(obj) {
      this.textValue = obj.label;
      this.show = !this.show;
      this.$emit("confirm", obj);
    },
    formatterValue(value) {
      let str = "";
      if (!this.columns.length || !value.length) {
        str = "";
      } else {
        let oArr = this.columns.filter((item) => {
          return item[this.keyValue].toString() == value.toString();
        });
        str = oArr[0][this.keyLabel];
      }

      return str;
    },
    //根据key值格式化成picker需要的option格式
    formatColumnsByKey() {
      let arr = [];
      let value = this.keyValue ? this.keyValue : "value";
      let label = this.keyLabel ? this.keyLabel : "label";
      this.columns.map((item) => {
        arr.push({
          label: item[label],
          value: item[value],
        });
      });
      this.selectOptions = arr;
    },
  },
  watch: {
    columns: {
      handler(newValue) {
        this.textValue = this.formatterValue(
          this.selectValue ? this.selectValue : ""
        );
      },
      deep: true,
      immediate: true,
    },
    selectValue: {
      handler(newValue) {
        this.textValue = this.formatterValue(newValue ? newValue : "");
      },
      deep: true,
      immediate: true,
    },
  },
};
script>

---

使用文件

<template>
  <div>
    <van-form validate-first>
      <VanSelect name="qylx" label="企业类型" placeholder="请选择企业类型" :selectValue="qylx" :keyValue="`value`" :keyLabel="`label`" :required="true"
        :readonly="true" :columns="qylxOption" :rules="rules.qybh" @confirm="qylxConfirm" />
      <div class="btnBomBox">
        <van-button round size="small" block @click="submitOn" type="info">提交van-button>
      div>
    van-form>
  div>
template>

<script>
import VanSelect from "@/components/vanSelect/index";
export default {
  components: {
    VanSelect,
  },
  data() {
    return {
      qylx: "",
      qylxOption: [
        { label: "自营企业", value: "1" },
        { label: "其他企业", value: "2" },
      ],
      rules: {
        qybh: [
          {
            required: true,
            message: "请选择企业类型",
          },
        ],
      },
    };
  },
  methods: {
    // 点击确定
    qylxConfirm(value) {
      this.qylx = value.value;
    },
    // 提交
    submitOn() {
      console.log(this.qylx);
    },
  },
};
script>

<style scoped>
.btnBomBox {
  padding: 0px 16px;
  display: flex;
  justify-content: center;
}
style>

---

实现效果