美文网首页Vue项目
Vant UI 二次封装 --下拉选择框

Vant UI 二次封装 --下拉选择框

作者: 前端_逗叔 | 来源:发表于2019-05-08 11:26 被阅读99次

痛点

image.png
在项目经常会遇到这样的设计,下拉选择框,在vant中没有提供直接的select组件,但是可以使用FieldPopupPicker这三个组件组合来完成。
如果页面中只有一个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

其他

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

相关文章

网友评论

    本文标题:Vant UI 二次封装 --下拉选择框

    本文链接:https://www.haomeiwen.com/subject/kcnpoqtx.html