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>
/** * 查看记录 * @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)")
希望大佬看到有不对的地方,提出博主予以改正!