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
模式实现多选功能。当用户选择完成后,通过事件将选中的值传递给父组件。