<template>
|
<view>
|
<button @click="showPicker">选择多项</button>
|
<view v-if="selectedItems.length">
|
<text>已选择：</text>
|
<view v-for="(item, index) in selectedItems" :key="index">
|
{{ item }}
|
</view>
|
</view>
|
|
<!-- Picker Modal -->
|
<view v-if="isPickerVisible" class="picker-modal" >
|
<view class="picker-overlay" ></view>
|
<scroll-view scroll-y="true" class="picker-content">
|
<checkbox-group>
|
<view v-for="(item, index) in pickerItems" :key="index" class="picker-item">
|
<checkbox :checked="selectedIndices.includes(index)" @change="handleCheckboxChange(index)"></checkbox>
|
{{ item }}
|
</view>
|
</checkbox-group>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isPickerVisible: false,
|
pickerItems: ['选项1', '选项2', '选项3', '选项4'],
|
selectedItems: [],
|
selectedIndices: []
|
};
|
},
|
methods: {
|
showPicker() {
|
this.isPickerVisible = true;
|
this.selectedItems = [];
|
this.selectedIndices = [];
|
},
|
handleCheckboxChange(index) {
|
const isSelected = this.selectedIndices.includes(index);
|
if (isSelected) {
|
// 如果已经选中，取消选择
|
this.selectedIndices = this.selectedIndices.filter(i => i !== index);
|
} else {
|
// 如果没有选中，选中该项
|
this.selectedIndices.push(index);
|
}
|
// 更新已选择的项
|
this.selectedItems = this.selectedIndices.map(i => this.pickerItems[i]);
|
},
|
|
}
|
};
|
</script>
|
|
<style>
|
.picker-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
.picker-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
.picker-content {
|
width: 90%;
|
height: 80%;
|
background: #fff;
|
border-radius: 10px;
|
overflow-y: auto;
|
padding: 10px;
|
}
|
.picker-item {
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
border-bottom: 1px solid #eee;
|
}
|
</style>
|
