vue-seamless-scroll遇到一些问题
vue-seamless-scroll点击事件不触发解决办法
使用事件委托来解决，代码如下：
<template>
<div class="container">
<div class="title">
<div class="title-left">越限预警</div>
</div>
<div class="box seamless-warp-item" @click="itemClick">
<vue-seamless-scroll :data="listData" :class-option="defaultOption">
<!-- <ul class="ul-scoll"> -->
<div v-for="(item, index) in listData" :key="index" class="ul-scoll">
<a-row>
<a-col :span="17">
<div class="scoll-left">
<span>{{ index + 1 }}</span>
<span class="span">{{ item.region }}</span>
<span class="span"
>{{ item.name }}于{{ item.occurDate }}
{{ item.occurTime }}发生越限，请知悉</span
>
</div>
</a-col>
<a-col :span="7" class="get-item-list" :data-index="index">
<a-button type="link" :id="'btn' + index" :data-index="index"
>查看详情</a-button
>
</a-col>
</a-row>
</div>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: { vueSeamlessScroll },
props: {
dataObj: {
type: Object
}
},
data () {
//这里存放数据
return {
listData: [],
}
},
computed: {
defaultOption () {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
//监控data中的数据变化
watch: {
dataObj: {
handler (newVal) {
// user里的对象
this.listData = newVal.data
},
deep: true,
immediate: true
}
},
//方法集合
methods: {
warningBtn (item) {
this.$emit('warningBtn', true, item)
// sessionStorage.setItem(" warningQuery", { region: item.code, stationId: item.id, time: item.occurDate })
},
itemClick (e) {
const item = e.target.closest(".get-item-list"); // 定位元素
if (item) { // 是否是滚动组件的某一行/列
const { index } = item.dataset;
this.$emit('warningBtn', true, this.listData[index])
// 后续操作
}
}
},
}
因为我业务需求得要点击事件触发后会有一个ant design vue的modal对话框弹出 ，但是在使用的过程中只要关闭对话框的话滚动的列表会出现dom刷新，偶尔会导致dom消失 解决办法是在modeal上加v-if