vue使用vue-seamless-scroll点击事件失效问题
在使用vue-seamless-scroll这个组件的时候发现存在一个问题:
自己写点击事件在滚动的项里面会自己复制一个dom出来,但是事件沒有复制出来。
解決方法:
我查看了很多文档,都是使用的事件代理;在自己需要点击的项中加一个class,在点击事件中用到。
上代码:
<div class="broadcast-content-list" @click="viewRecords($event)"> <vueSeamless :data="scrollContent" :class-option="option" ref="seamlessScroll" > <div class="broadcast-content-list-item" v-for="(item, index) in scrollContent" :key="index" > <ul> ... <li class="listItem" :data="JSON.stringify(item)" > <el-button type="text">查看记录</el-button> </li> </ul> </div> </vueSeamless> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /** * 查看记录 * @param {*} e */ viewRecords(e) { const path = e.path || (e.composedPath && e.composedPath()); let target = path.filter((r) => /listItem/.test(r.className)); if (target.length) target = target[0]; else return ; const data = JSON.parse(target.getAttribute( "data" )); // 单项数据详情 // 跳转详情页面 this .$router.push( `/arrearsvehicle/details?vehicleNo=${data.vehicleNo}` ); }, |
其中最重要的为:(class="listItem" :data="JSON.stringify(item)")
希望大佬看到有不对的地方,提出博主予以改正!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· Apache Tomcat RCE漏洞复现(CVE-2025-24813)