实现图效果
html代码
<!-- 截屏 -->
<div class="video-screenshot">
<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>
<!-- 提示文字区域 -->
<!-- <div v-if="isLastImg" style="color: red;">当前最后条内容</div> -->
//切换按钮
<div class="button">
<button @click="prevContent" class="buttom">上一条</button>
<button @click="nextContent">下一条</button>
</div>
</div>
最后一条提示(提示页面上)
currentIndex: 0, // 当前显示的图片序号
效果图
computed: {
// 计算属性,用于判断当前是否是最后一张图片
isLastImg() {
return this.currentIndex === this.screenshotList.length - 1;
},
},
// 切换到上一张图片
prevContent() {
this.currentIndex = Math.max(0, this.currentIndex - 1);
},
// 切换到下一张图片
nextContent() {
this.currentIndex = Math.min(this.screenshotList.length - 1, this.currentIndex + 1);
},