Vue封装Vant选择器组件

秦羽 2020-05-26 AM 1375℃ 1条

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

- 封装组件代码

```html
<template>
  
  <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
    },
    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;
    }
  }
};
</script>

```

- 使用方法

```html
<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>

```

标签: vue, Vant, 组件, 选择器

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.qinyu.cc/archives/35.html

上一篇 VSCode常用插件

下一篇 Python代码加密的所有方式与对比

Vue封装Vant选择器组件

评论啦~

唉呀 ~ 仅有一条评论

栏目分类

标签云

友情链接申请

Vue封装Vant选择器组件

 评论啦~

唉呀 ~ 仅有一条评论

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请