uni-app picker插件需求提供多选功能

在uni-app中，picker组件默认只支持单选功能，若要实现多选功能，需要结合其他组件和逻辑进行自定义实现。以下是一个基本的实现思路和代码案例，利用checkbox-group和弹窗模拟多选picker的效果。

实现思路

1. 使用checkbox-group组件来承载多选项。
2. 使用一个弹窗（例如modal或自定义弹窗）来展示多选列表。
3. 在弹窗中展示所有可选项，用户可以选择多个。
4. 确定选择后，将结果返回给调用方。

代码案例

1. 页面结构 (template)

<template>
  <view>
    <button @click="showPicker">选择多项</button>
    <modal v-if="showModal" @confirm="confirmSelection" @cancel="cancelSelection">
      <view class="modal-content">
        <checkbox-group @change="checkboxChange">
          <label v-for="item in pickerData" :key="item.value">
            <checkbox :value="item.value">{{ item.text }}</checkbox>
          </label>
        </checkbox-group>
      </view>
    </modal>
  </view>
</template>

2. 脚本部分 (script)

export default {
  data() {
    return {
      showModal: false,
      pickerData: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3' },
        // 更多选项...
      ],
      selectedValues: []
    };
  },
  methods: {
    showPicker() {
      this.selectedValues = []; // 清空之前的选择
      this.showModal = true;
    },
    confirmSelection() {
      this.showModal = false;
      // 这里可以处理选择的结果，例如发送到服务器或更新页面状态
      console.log('Selected values:', this.selectedValues);
    },
    cancelSelection() {
      this.showModal = false;
      this.selectedValues = [];
    },
    checkboxChange(e) {
      this.selectedValues = e.detail.value;
    }
  }
};

3. 样式部分 (style, 可选)

<style>
.modal-content {
  padding: 20px;
}
</style>

说明

• modal组件用于创建弹窗，可以根据需求自定义样式。
• checkbox-group和checkbox组件用于实现多选功能。
• 通过@change事件监听用户选择的变化，并更新selectedValues数组。
• showPicker方法用于显示弹窗，confirmSelection和cancelSelection方法分别处理确定和取消操作。

这种方法虽然不直接使用picker组件，但能够实现多选功能，并且灵活性和可定制性更高。