vue中使用vue-seamless-scroll点击事件失效问题

vue中使用vue-seamless-scroll点击事件失效问题

vue-seamless-scroll事件失效原因

vue-seamless-scroll会将原来的dom复制一份放在原来列表下滚动，复制的dom无法复制原来的事件，

解决方法

查阅百度解决方法使用是事件代理
下面介绍使用事件代理如何拿到需要的值
注意：一定要在以下li中加入一个class 后面需要用到

<div @click="onModel($event)">
    <vue-seamless-scroll
        :data="list"
        class="bodyBox"
        :class-option="{
          step: 0.5,
        }"
    >
      <ul>
        <li v-for="item in list" class="listItem" :data="JSON.stringify(item)" :key="item.id">{{item.label}}</li>
      </ul>
    </vue-seamless-scroll>
  </div>

const onModel = (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"));
};

此时data就是你绑定上的数据

到此问题解决