前端开发实现自定义勾选/自定义样式,可复选,可取消勾选

news/2024/11/8 15:54:05/

在这里插入图片描述
基于后端返回数组实现多选、复选
以下代码基于vue2,如果有需要React/Vue3或者其他框架代码的,可以通过国内直连GPT4o进行代码转换,转换正确率99%
前端代码如下(直接拷贝到你的vue代码即可):

javascript"><!-- CustomCheckboxList.vue -->
<template><div class="checkbox-list"><div v-for="(item, index) in items" :key="index"class="checkbox-item"@click="toggleItem(index)"><div class="custom-checkbox" :style="{'border-color': item.color,'background-color': item.checked ? item.color : 'transparent'}"><span v-if="item.checked" class="checkmark"></span></div><span class="item-text">{{ item.text }}</span></div></div>
</template><script>
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})}}
}
</script><style 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>

http://www.ppmy.cn/news/1545395.html

相关文章

大语言模型(LLM)量化基础知识(一)

请大家关注我的知乎博客&#xff1a;- 派神 - - 知乎 随着大型语言模型 (LLM) 的参数数量的增长,与其支持硬件&#xff08;加速器内存&#xff09;增长速度之间的差距越来越大&#xff0c;如下图所示&#xff1a; 上图显示&#xff0c;从 2017 年到 2022 年&#xff0c;语言模…

【ShuQiHere】️使用 Tailscale 轻松构建安全、分布式网络

&#x1f310; 【ShuQiHere】️ &#x1f4dc; 目录 &#x1f50d; 什么是 Tailscale&#xff1f;&#x1f4da; 基础概念解析⚙️ Tailscale 的原理及功能&#x1f5a5;️ 配置步骤与代码示例&#x1f4a1; 最佳实践与常见问题&#x1f4c8; 应用实例&#xff1a;Tailscale …

Python Pandas中的高级数据插值方法

大家好&#xff0c;在数据分析过程中&#xff0c;缺失值是一个常见的问题&#xff0c;尤其是在处理真实世界的数据集时&#xff0c;缺失值的存在可能会对分析结果产生较大的影响。为了解决这个问题&#xff0c;Pandas库提供了多种处理缺失值的方式&#xff0c;其中插值法是一种…

Gitlab新建用户无法收到邮件的问题解决办法

文章目录 前言解决方案遇到的错误域名解析问题解决办法 邮箱认证问题解决方案 端口配置互斥解决方案 运行环境docker安装总结 前言 这个问题网上解决的帖子很多&#xff0c;根本原因就是配置错误&#xff0c;修改好配置就可以了&#xff0c;我也没有其他的更加新奇的解决办法&…

input file检验成功之后才可以点击

input file检验成功之后才可以点击 需求 在上传发票前需要先填写发票号&#xff0c;然后点击选择文件直接完成上传功能 实现思路 在没有输入发票号之前&#xff0c;file按钮不可用不能点击&#xff0c;输入之后&#xff0c;按钮可用&#xff0c;点击之后选择文件&#xff…

深度学习(十):伦理与社会影响的深度剖析(10/10)

深度学习&#xff1a;伦理与社会影响的深度剖析 一、深度学习的伦理挑战 &#xff08;一&#xff09;数据隐私之忧 深度学习模型的训练往往需要大量数据&#xff0c;而数据的收集过程可能会侵犯个人隐私。例如&#xff0c;据统计&#xff0c;面部识别技术在全球范围内每天会收…

【算法】【优选算法】双指针(下)

目录 一、611.有效三⻆形的个数1.1 左右指针解法1.2 暴力解法 二、LCR 179.查找总价格为目标值的两个商品2.1 左右指针解法2.2 暴力解法 三、15.三数之和3.1 左右指针解法3.2 暴力解法 四、18.四数之和4.1 左右指针解法4.2 暴力解法 一、611.有效三⻆形的个数 题目链接&#x…

debian11安装最新rabbitmq

1、使用官网提供系统对应的安装脚本 安装 版本说明&#xff1a; Debian Buster代表Debian 10 Debian Bullseye代表Debian 11 Debian Bookworm代表Debian 12 ‌Debian Trixie代表Debian 13 Debian Sid代表Debian unstable版本 2、新建脚本文件 vim rabbitMq.sh将脚本内容复制到…