joomla 网站 html 空,世界工厂网优质货源,适合网站开发工程师的公司,做网站怎么把背景变成纯色基于后端返回数组实现多选、复选 以下代码基于vue2#xff0c;如果有需要React/Vue3或者其他框架代码的#xff0c;可以通过国内直连GPT4o进行代码转换#xff0c;转换正确率99% 前端代码如下(直接拷贝到你的vue代码即可)#xff1a;
!-- CustomCheckboxList.vue --如果有需要React/Vue3或者其他框架代码的可以通过国内直连GPT4o进行代码转换转换正确率99% 前端代码如下(直接拷贝到你的vue代码即可)
!-- CustomCheckboxList.vue --
templatediv classcheckbox-listdiv v-for(item, index) in items :keyindexclasscheckbox-itemclicktoggleItem(index)div classcustom-checkbox :style{border-color: item.color,background-color: item.checked ? item.color : transparent}span v-ifitem.checked classcheckmark✓/span/divspan classitem-text{{ item.text }}/span/div/div
/templatescript
export default {name: CustomCheckboxList,data() {return {// 示例数据实际使用时可以通过 props 传入items: [{ text: 选项1, color: #FF5733, checked: false },{ text: 选项2, color: #33FF57, checked: false },{ text: 选项3, color: #3357FF, checked: false },{ text: 选项4, color: #FF33F5, checked: false }]}},methods: {toggleItem(index) {this.$set(this.items[index], checked, !this.items[index].checked)// 触发事件通知父组件选中状态变化this.$emit(change, {index,checked: this.items[index].checked,items: this.items})}}
}
/scriptstyle scoped
.checkbox-list {padding: 16px;
}.checkbox-item {display: flex;align-items: center;margin-bottom: 12px;cursor: pointer;
}.custom-checkbox {width: 24px;height: 24px;border: 2px solid;border-radius: 50%;margin-right: 12px;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;
}.checkmark {color: white;font-size: 16px;font-weight: bold;
}.item-text {font-size: 16px;
}/* 可选的悬停效果 */
.checkbox-item:hover .custom-checkbox {opacity: 0.8;
}
/style
