鼠标事件:关键词@mouseenter="startScroll" @mouseleave="stopScroll" “screenshotList”
<div class="video-screenshot" @mouseenter="startScroll" @mouseleave="stopScroll"><div class="screenshot-title"><span>实时告警截图</span> </div><div class="screenshot-bottom" v-for="(item, index) in screenshotList" :key="index"v-show="index === currentIndex"><div class="video-img"><img :src="item.imgList" alt=""></div><div class="text"><div>告警名称:{{ item.name }}</div><div>报警时间:{{ item.time }}</div><div>报警地点:{{ item.adress }}</div></div></div><!-- 提示文字区域 --><!-- <el-alert v-if="isLastImg" title="最后一条了哦" type="warning" center></el-alert> --><div class="button"><button @click="prevContent">上一条</button><button @click="nextContent">下一条</button></div></div>data(){
return {timer: null,screenshotList:}}
mounted() {this.autoPlay(); // 初始化时截图动态展示},// 鼠标移入停止滚动startScroll() {clearInterval(this.timer);},// 鼠标移出继续止滚动stopScroll() {this.autoPlay();},// 截图滚动播放方法autoPlay() {this.timer = setInterval(() => {for (let i = 0; i < this.screenshotList.length; i++) {const currentIndex = i;this.screenshotList.push(this.screenshotList.splice(currentIndex, 1)[0]);if (this.index > this.screenshotList.length - 1) {this.index = 0;}}}, 3000); // 每隔2秒播放下一个元素}