关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效

前言

vue2 项目中使用vue-seamless-scroll,复制出来的数据点击无效,经过多方查找总结,终于解决问题了,写篇文章防止下次遇到

参考文章:
vue-seamless-scroll 点击click失效
【vue】vue-seamless-scroll点击事件失效
关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效
vue-seamless-scroll 滚动插件的使用及循环的列表点击事件不生效的解决方案

vue2项目中如何使用vue-seamless-scroll依赖,参考之前发布的文章:
【vue】 vue-seamless-scroll 无缝滚动依赖

解决

使用此组件,第二轮数据点击事件失效,采用事件委托解决,父元素绑定一个点击事件@click='clickup($event)',子元素添加JSON.stringify(item)即当前行数据

<template>
  <div
    class="maintable"
    @click="clickup($event)"
    v-if="datalist && datalist.length > 0"
  >
    <vue-seamless-scroll :data="datalist" :class-option="listOption">
      <div class="onebox" v-for="(item, index) in datalist" :key="index">
        <div class="name" :title="item.xm">{{ item.xm }}</div>
        <div class="phone">{{ item.enSjh }}</div>
        <div class="cardnumber">
          {{ item.enSfzh }}
          <!-- {{ item.cardnumber | jmsjh }} -->
        </div>
        <div class="record" :data-obj="JSON.stringify(item)">
          <!-- :data-obj="JSON.stringify(item)" 传递参数 -->
          追踪记录查看
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

点击事件

clickup(e) {
     // 使仅点击按钮触发点击事件
     let row = JSON.parse(e.target.dataset.obj); // 传递参数
     console.log(row,"当前行数据")
 },

下班~

posted @ 2024-03-20 08:00  fruge365  阅读(22)  评论(0)    收藏  举报  来源