vue2 uniapp checkbox设置只允许选中一个
时间: 2024-09-26 19:15:21 浏览: 54
在 Vue 2 或 UniApp 中,如果你想限制单个 `checkbox` 只能被选中一次,你可以通过数据绑定和 v-model 组件属性来实现。首先,你需要维护一个数组或者其他数据结构来跟踪已选中的项,并在模板上添加一个自定义指令或者监听 checked 的变化。
以下是一个简单的示例:
1. 创建一个Vue组件,假设我们有一个`selectedItems`数组来记录选中的项目:
```html
<template>
<div>
<uni-checkbox-group v-model="selectedItems" @change="handleChange">
<uni-checkbox :key="index" :label="item.label" :disabled="isDisabled(item)" :value="item.value">{{ item.label }}</uni-checkbox>
<!-- 这里迭代你所有的选项 -->
<template v-for="(item, index) in items" :key="index">
<slot :item="item"></slot>
</template>
</uni-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
selectedItems: [], // 选中的项目数组
items: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
// 更多选项...
]
};
},
methods: {
handleChange(value) {
// 如果某个项已经被选择,移除它
this.selectedItems = this.items.filter(item => !value.includes(item.value));
},
isDisabled(item) {
// 检查当前item是否已在selectedItems中
return this.selectedItems.some(selectedItem => selectedItem === item.value);
}
}
};
</script>
```
在这个例子中,每次 `checkbox` 的 `checked` 属性变化时,`handleChange` 方法会被触发。如果新选中的项已经在 `selectedItems` 中,就从数组中移除它,确保只有一个项可以被选中。
阅读全文