Taro UI Vue3 中的picker mode="multiSelector" 怎么使用，代码举例

Taro UI Vue3 是一个基于 Vue3 开发的 Taro 组件库，用于开发小程序和其他移动端应用。其中的 picker 组件也支持 `mode="multiSelector"`，可以用于实现多选选择器。

以下是一个简单的示例代码，演示如何在 Taro UI Vue3 中使用多选选择器：

<template>
  <view class="index">
    <taro-picker mode="multiSelector" :range="{{ range }}" @change="handleChange"></taro-picker>
  </view>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Picker } from '@tarojs/components';
import '@tarojs/components/dist/weapp/components/picker/picker.wxss';

export default defineComponent({
  name: 'Index',
  components: {
    TaroPicker: Picker
  },
  setup() {
    const range = ref([[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]);
    const selectedValues = ref([]);

    const handleChange = (event) => {
      selectedValues.value = event.detail.value;
    };

    return {
      range,
      selectedValues,
      handleChange
    };
  }
});
</script>

在这个示例中，我们使用了 Taro UI Vue3 中的 `taro-picker` 组件，设置 `mode="multiSelector"` 来启用多选选择器。我们还通过 `:range` 属性将选项范围传递给组件。在 `@change` 事件中，我们使用 `event.detail.value` 获取用户选择的值，并将其赋值给 `selectedValues` 变量，以便在模板中显示选中的值。

请注意，为了正确显示多选选择器，我们需要在样式中引入 `picker.wxss` 文件。

当用户选择多个值时，`selectedValues` 变量将包含一个数组，其中包含每个选择器列的选择值的索引。例如，如果用户选择了第一列的第 2 个值和第二列的第 4 个值，则 `selectedValues` 变量将包含数组 `[1, 3]`。

您可以根据您的需求调整选项范围和组件的外观和行为。