vue-seamless-scroll 某些点击不生效
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
问题描述:
使用了vue-seamless-scroll,里面嵌套了ul li ,对li进行遍历,实现一个滚动列表的效果,对每一个li加了test点击事件,每次点击一行li时,都会触发点击事件,但是接口返回的前三行数据点击事件不生效的情况是为什么呢?
解决:
不能点击的原因是因为html元素是复制出来的(滚动组件是将后面的复制出来一份,进行填铺页面,方便滚动)
解决方案:往滚动组件的父节点上添加绑定事件(js冒泡机制),通过e.target定位到具体点击位置,然后判断点击位置是否是你滚动组件的一列/行
<div v-if="maintenanceDetailInfo.length > 0" @click="itemClick">
<vue-seamless-scroll :data="maintenanceDetailInfo" :class-option="optionHover" class="seamless-cont">
<ul>
<li v-for="(item, index) in maintenanceDetailInfo" :key="index" class="li-cont" :data-index="index">
<span class="title1 text_align">{{subStr(item.propertyName)}}</span>
<span class="title2 text_align">{{subStr(item.deptName)}}</span>
<span class="title3 text_align">{{item.maintenanceLevel | levelFlt}}</span>
<span class="title4 text_align">{{item.estimatedEndTime}}</span>
<span class="title5 text_align">{{subStr(item.maintenanceResult)}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
itemClick(e) {
const item = e.target.closest(".li-cont"); // 定位元素
if (item) { // 是否是滚动组件的某一行/列
const { index } = item.dataset;
this.info = this.maintenanceDetailInfo[index]; // 你想获取的数据
// 后续操作
this.$emit('showMaintenance',this.info)
}
},
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)