<template>
<view class="checkbox-container">
<view v-for="(item, index) in checkboxListData" :key="index" class="checkbox-item" :style="{'border-color': typeColor[type], 'background': item.isChecked? typeColor[type] : '#ffffff'}"
@click="checkboxItemClick(index, item)">
<view :style="{'color': item.isChecked? '#ffffff' : typeColor[type] }">{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
model: {
prop: 'selectedList',
event: 'selectedListChange'
},
props: {
checkboxList: {
type: Array,
default: () => [{
name: "t1",
id: 1
},
{
id: 2,
name: "t2"
}
]
},
selectedList: {
type: Array,
default: () => [{
name: 't1',
id: 1
}]
},
type: {
type: String,
default: "success" // primary/success/danger
},
isSingle: {
type: Boolean,
default: false
}
},
data() {
return {
checkboxListData: [],
typeColor: {
primary: "#007bff",
success: "#8BC34A",
danger: "#dc3545"
},
};
},
watch: {
selectedList(newVal) {
console.log('select list new value:', newVal)
this.getCheckboxListData(newVal)
}
},
mounted() {
// 获取checkbox list data
this.getCheckboxListData()
},
methods: {
getCheckboxListData(selectedList) {
// 获取checkbox list data
if (selectedList === undefined) {
selectedList = this.selectedList
}
const checkboxListData = []
for (const i in this.checkboxList) {
checkboxListData.push(Object.assign({
isChecked: false
}, this.checkboxList[i]))
for (const j in selectedList) {
if (this.checkboxList[i].id === selectedList[j].id) {
checkboxListData[i].isChecked = true
break
}
}
}
this.checkboxListData = checkboxListData
console.log('mounted list data:', this.checkboxListData)
},
updateCheckboxListData(listItem) {
const selectedList = []
for (const i in this.checkboxListData) {
if (this.checkboxListData[i].id === listItem.id) {
if (this.isSingle) {
this.checkboxListData[i].isChecked = true
} else {
this.checkboxListData[i].isChecked = !this.checkboxListData[i].isChecked
}
} else {
if (this.isSingle) {
this.checkboxListData[i].isChecked = false
}
}
if (this.checkboxListData[i].isChecked) {
selectedList.push(this.checkboxListData[i])
}
}
return selectedList
},
checkboxItemClick(index, item) {
console.log('checkbox item click:', index, item)
const result = this.updateCheckboxListData(item)
console.log('selected list:', result)
this.$emit('selectedListChange', result)
}
}
};
</script>
<style scoped>
.checkbox-container {
padding: 14upx 0;
}
.checkbox-item {
border-width: 1px;
border-style: solid;
border-radius: 7upx;
padding: 7upx 24upx;
margin-right: 24upx;
display: inline-flex;
font-size: 14px;
}
</style>
转载于:https://www.cnblogs.com/li1234yun/p/11104649.html