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)")

posted @ 2022-07-25 16:00  zaijinyang  阅读(2455)  评论(0编辑  收藏  举报