问题:使用vue-seamless-scroll
组件时,循环第一遍可以正常点击,之后不能够正常点击,触发不了点击事件.
解决办法:在vue-seamless-scroll
外的父元素上添加点击事件,利用js
的事件委托(通俗地来讲,就是把一个元素响应事件(click、keydown...)的函数委托到另一个元素)
使用(data-XXX)自定义属性
可以给每一层都加上
html
<div class="rightBottom scroll__common" @click="clickProp($event)">
<vue-seamless-scroll
:data="equipmentList"
:class-option="classOption"
class="warp"
style="width: 100%"
>
<div
:class="getClass(item.equStatus)"
v-for="(item, index) in equipmentList"
:key="index"
>
<div
class="deviceNum"
@click="toDetail(item.id, item)"
:data-id="JSON.stringify(item.id)"
:data-index="index"
>
<span
class="name"
:data-id="JSON.stringify(item.id)"
:data-index="index"
>{{ item.name }}</span
>
<span
class="num"
:data-id="JSON.stringify(item.id)"
:data-index="index"
>{{ item.num }}</span
>
</div>
</div>
</vue-seamless-scroll>
</div>
js
clickProp(event){
let eid = event.target.dataset.eid;
let index = event.target.dataset.eid
},
参考: