vue-seamless-scroll插件点击事件失效

最新推荐文章于 2024-05-15 13:45:01 发布

@草莓小布丁

最新推荐文章于 2024-05-15 13:45:01 发布

阅读量291

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52441253/article/details/135945817

版权

文章讲述了在使用vue-seamless-scroll插件时，点击事件似乎在某些列表项上失效的问题，以及提供了一个可能的解决方案，涉及获取点击目标元素和数据解析的部分代码。

摘要由CSDN通过智能技术生成

vue-seamless-scroll插件点击事件失效

<div class="cont" @click="rankBtn($event)">
    <vue-seamless-scroll :data="comScoreList" :class-option="classOption" class="table-content">
        <ul>
            <li v-for="(v, index) in comScoreList" :data="JSON.stringify(v)" :key="index"
                class="listRank listItem">
                <div class="msg-list">
                    <div class="msg-left">
                        <span
                              :class="index == 0 ? 'drinkdot' : index == 1 ? 'drinkdot' : index == 2 ? 'drinkdot' : 'greydot'">{{
                            index + 1 }}</span>
                        <span class="rankName">{{ v.name
                            || 0
                            }}</span>
                    </div>
                    <div class="msg-right">
                        <span class="click-ele">{{
                            v.platformAmount ? (v.platformAmount / 100).toFixed(2) : 0 }}
                        </span>
                    </div>
                </div>
            </li>
        </ul>
    </vue-seamless-scroll>
</div>

点击事件

rankBtn(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.rankData = data;
},