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>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
     * 查看记录
     * @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 @   zaijinyang  阅读(2735)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· Apache Tomcat RCE漏洞复现(CVE-2025-24813)
点击右上角即可分享
微信分享提示