Vant UI：赋能选择器的多选和单选，自定义多选选中值

前言

Vant UI 是一个功能强大且易于使用的移动端组件库。它提供了丰富的组件和 API，可帮助开发者快速构建高质量的移动应用。本文将重点介绍如何封装 Vant UI 选择器组件，以实现多选和单选功能，并允许自定义多选选中值。

准备工作

在开始之前，确保已经安装了 Vant UI 2.0 版本。可以使用 npm 包管理器安装：

npm install vant@2.0 --save

实现选择器封装

1. 创建选择器组件

在项目中创建一个新的组件文件，例如 Selector.vue，并输入以下代码：

<template>
  <van-cell title="选择器">
    <van-checkbox-group v-model="selectedValues" multiple>
      <van-checkbox v-for="item in options" :label="item.label" :key="item.value" :value="item.value" />
    </van-checkbox-group>
  </van-cell>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
    },
    defaultValue: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      selectedValues: [],
    };
  },
  created() {
    this.selectedValues = this.defaultValue;
  },
};
</script>

2. 配置选项和默认值

在 Selector.vue 组件中，options 属性接受一个选项数组，每个选项是一个对象，具有 label（显示文本）和 value（值）属性。defaultValue 属性用于设置组件初始化时默认选中的值。

使用选择器组件

在父组件中，导入 Selector 组件并将其用作如下所示：

<template>
  <Selector :options="options" :default-value="selectedValues" @change="onSelectorChange" />
</template>

<script>
import Selector from './Selector.vue';
export default {
  components: { Selector },
  data() {
    return {
      options: [
        { label: '选项 1', value: 'option1' },
        { label: '选项 2', value: 'option2' },
      ],
      selectedValues: [],
    };
  },
  methods: {
    onSelectorChange(value) {
      this.selectedValues = value;
    },
  },
};
</script>

自定义多选选中值

默认情况下，选择器组件使用 v-model 指令更新 selectedValues 数据。要自定义多选选中值，可以在 created 钩子中设置 selectedValues 数据，如下所示：

created() {
  this.selectedValues = this.defaultValue ? this.defaultValue : [];
},

这将确保在组件初始化时应用自定义的多选选中值。

总结

通过封装 Vant UI 选择器组件，可以轻松实现多选和单选功能，并自定义多选选中值。该封装提供了灵活性，使开发者可以根据自己的需求定制组件。利用此封装，开发者可以快速创建功能强大且易于使用的筛选器，从而增强其移动端应用的用户体验。