赋能企业效率，Vue3 Vant Picker 组件巧妙封装Select功能，助力数据选择更便捷

前端

2023-10-05 08:16:57

封装Select组件：利用Vue3和Vant提升表单体验

概览

构建用户界面的过程中，选择控件至关重要。本文将指导您如何使用Vue3和Vant库封装一个Select组件，为您的表单注入更多功能和可定制性。

理解Vue3和Vant

Vue3： 一款渐进式JavaScript框架，以其简洁语法、响应系统和组件化设计著称。
Vant： 基于Vue.js的移动端组件库，提供一系列高质量、易用组件，涵盖各种常见场景。

封装Select组件

需求分析

Select组件是一个下拉框控件，用户从中选择预定义选项。封装时，我们将专注于选项渲染、选中状态维护和值回显。

组件设计

封装过程涉及以下步骤：

定义一个名为VanSelect的Vue组件。
使用Vant的Picker组件作为基础。
通过自定义插槽和事件实现所需功能。

代码实现**

<template>
  <!-- 输入框：显示选中值和弹出选择器 -->
  <van-field
    v-model="text"
    v-bind="$attrs"
    readonly
    is-link
    :name="name"
    @click="show = true"
  >
    <!-- 自定义图标：箭头向下 -->
    <template #icon>
      <van-icon name="arrow-down" />
    </template>
  </van-field>
  <!-- 弹出选择器 -->
  <van-popup
    v-model="show"
    position="bottom"
  >
    <!-- 选项选择器：显示选项列表 -->
    <van-picker
      :columns="options"
      :default-index="defaultIndex"
      @change="handleChange"
      @cancel="handleCancel"
    />
  </van-popup>
</template>

<script>
export default {
  name: 'VanSelect',
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      show: false,
      text: '',
      defaultIndex: -1,
    };
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.text = this.options[newValue] || '';
        this.defaultIndex = newValue;
      }
    },
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value[0]);
      this.show = false;
    },
    handleCancel() {
      this.show = false;
    },
  },
};
</script>

使用Select组件

导入组件

在需要使用VanSelect组件的Vue组件中，首先导入该组件。

import VanSelect from '@/components/VanSelect.vue';

注册组件

然后，在Vue组件中注册VanSelect组件。

export default {
  components: {
    VanSelect,
  },
};

应用组件

最后，可以在Vue组件的模板中使用VanSelect组件。

<template>
  <van-select v-model="selectedValue" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        '选项1',
        '选项2',
        '选项3',
      ],
    };
  },
};
</script>