uni-app 单列多选的 picker 插件需求

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 单列多选的 picker 插件需求

目前试了好几个插件,都是有问题的

2 回复

可以做 专业插件开发 q 1196097915 主页 https://ask.dcloud.net.cn/question/91948


针对您提出的uni-app中单列多选的picker插件需求,我们可以利用uni-app的自定义组件以及picker组件的自定义模式来实现。以下是一个简单的实现示例,包括创建自定义组件和页面使用代码。

创建自定义组件 multi-select-picker.vue

<template>
  <view>
    <picker mode="multiSelector" :range="range" :value="selectedValues" @change="onPickerChange">
      <view class="picker">
        <view v-for="(item, index) in selectedItems" :key="index">
          {{ item }}
        </view>
      </view>
    </picker>
    <button @click="showPicker">选择</button>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      range: [this.options.map(option => option.text)],
      selectedValues: [0],
      selectedItems: [this.options[0].text]
    };
  },
  methods: {
    onPickerChange(e) {
      this.selectedValues = e.detail.value;
      this.selectedItems = this.selectedValues.map(val => this.options[val].text);
      this.$emit('change', this.selectedItems);
    },
    showPicker() {
      uni.showActionSheet({
        itemList: ['选择'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.$refs.picker.focus();
          }
        }
      });
    }
  }
};
</script>

<style>
.picker {
  margin-top: 20px;
}
</style>

页面使用自定义组件 index.vue

<template>
  <view>
    <multi-select-picker :options="options" @change="handleChange"></multi-select-picker>
    <view>选中的值: {{ selectedValues }}</view>
  </view>
</template>

<script>
import MultiSelectPicker from './components/multi-select-picker.vue';

export default {
  components: {
    MultiSelectPicker
  },
  data() {
    return {
      options: [
        { text: '选项1' },
        { text: '选项2' },
        { text: '选项3' }
      ],
      selectedValues: []
    };
  },
  methods: {
    handleChange(values) {
      this.selectedValues = values;
    }
  }
};
</script>

<style>
/* 样式根据需要自定义 */
</style>

以上代码示例展示了如何创建一个简单的单列多选picker组件,并在页面中使用它。multi-select-picker.vue组件接收一个options数组作为prop,并通过picker组件的multiSelector模式实现多选功能。当用户选择完成后,通过事件将选中的值传递给父组件。

回到顶部