痛点

image.png
在项目经常会遇到这样的设计，下拉选择框，在vant中没有提供直接的select组件，但是可以使用Field、Popup和Picker这三个组件组合来完成。
如果页面中只有一个select这样做做也还可以，但是现在页面中有三个select就有点繁琐了，所以考虑进行组件的封装。

使用期望

<van-field-select-picker
          label="物料类型"
          placeholder="选择类型"
          v-model="materielType"
          :columns="materielTypeList"
        />

我希望是在页面中这样使用组件

新建组件

image.png
在项目的src/components文件夹下面新建了一个VanFieldSelectPicker.vue文件，具体代码如下，这里主要就是学习了一下组件嵌套时自定义v-model，组件中暂时也没考虑太多其他的东西，有什么问题只能遇到了再更新。

<template>
  <div>
    <van-field
      v-model="result"
      v-bind="$attrs"
      readonly
      is-link
      @click="show = !show"
    />
    <van-popup v-model="show" position="bottom">
      <van-picker
        :columns="columns"
        show-toolbar
        :title="$attrs.label"
        @cancel="show = !show"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  model: {
    prop: "selectValue"
  },
  props: {
    columns: {
      type: Array
    },
    selectValue: {
      type: String
    }
  },
  data() {
    return {
      show: false,
      result: this.selectValue
    };
  },
  methods: {
    onConfirm(value) {
      this.result = value;
      this.show = !this.show;
    }
  },
  watch: {
    selectValue: function(newVal) {
      this.result = newVal;
    },
    result(newVal) {
      this.$emit("input", newVal);
    }
  }
};
</script>

<style></style>

效果

            <van-field-select-picker
              label="物料类型"
              placeholder="请选择"
              v-model="value1"
              :columns="[1, 2, 3]"
            />
            <van-field-select-picker
              label="品牌"
              placeholder="请选择"
              v-model="value2"
              :columns="[1, 2, 3]"
            />
            <van-field-select-picker
              label="规格"
              placeholder="请选择"
              v-model="value3"
              :columns="[1, 2, 3]"
            />

image.png

其他

对于日期选择框基本也可以这样做，只是我项目中暂时还可以用到，用到在封装。