起因-变量过多

可以看到， vant官网的选择器示例，需要的变量和函数为5个。如果表单里面的选择器大于3个， 这显然不利于我们的复制粘贴，非常难受。在重复的布局需要多次使用的时候，抽离出公共组件，而后进行调用，何尝不是一件方便自己的事情。（当然，若你的领导要以代码行数考核你的工作量，那么你就尽情复制粘贴原有代码吧）

    <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        :label="label"
        placeholder="请选择"
        @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>

思索-思考组件传参

对我而言， 表单中的选择器组件，只需要传入 label 和 待选择数组， 子组件回传(emit)选择结果就行，父组件的只需要接收回传的数据，在表单之中附上索引值，而后提交。 即为：

      <custom-select
          label="人员类别"
          v-model="personCategory"
          :columns="categoryArray"
      />

这样的话，复制粘贴 七八上十个也不会那么难受。在表单父组件页面导入子组件，然后使用即可，非常好用。

• CustomSelect.vue （子组件）

<template>
  <div>
    <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        :label="label"
        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 {
  name: "customSelect",
  props:{
    value:{
      type:String,
      default:''
    },
    label:{
      type:String,
      default:''
    },
    columns:{
      type:Array,
      default:[]
    }

  },
  data(){
  return{
    showPicker:false,
    }
  },
  methods:{
    onConfirm(v){
      this.$emit('input',v)
      this.showPicker = false
    }
  }
}
</script>

<style scoped>

</style>

手机端选择器-效果图

总结

就手机端的UI库而言，功能上还是比不上电脑端的Ant design完善。目前该选择器只支持提交顺序递增的索引，比如：1-杭州；2-宁波； 3-温州； 如果再来个福州，在不做额外判断的情况下，在选择器数组中只能为4，而实际开发中，并非如此严格递增。所以，下一步便是封装一个支持字典作为备选条件的选择器组件。