一.效果如下:
二.思路如下:
1.首先遍历后端传过来的进行遍历(这样图片可能不止六张)
2.在获取数据进行判断 大于6做一个处理
3.大于6的 更多要显示出来
4.点击更多 在把其他的显示出来
看到这个--------
是不是想骂人--------
这都是什么玩意--------
三.上栗子:
在页面上写代码:
<div class="clearfix" style="display: flex; flex-wrap: wrap">
<--这里是遍历-->
<div
v-for="(item, index) in fileList"
:key="index"
style="margin-left: 10px; margin-top: 10px"
>
<--这里是vue引用全屏插件 翻我的csdn可以查到怎样用-->
<img
v-image-preview
:src="item.url"
style="width: 100px; height: 100px"
/>
<--添加更多-->
<span class="moreImg" v-if="flag" @click="moreImge"
>更多</span
>
</div>
</div>
逻辑部分代码:
if (this.dataproject.conversationImgUrl.length > 0) {
var fileListArr1 = [];
this.fileList = this.$imageUtil.handleImages(
this.dataproject.conversationImgUrl
);
this.imgArr = this.$imageUtil.handleImages(
this.dataproject.conversationImgUrl
);
if (this.fileList.length >= 6) {
this.flag = true;
// 图片长度超出6个,截取数据长度 限制6个
this.fileList.forEach((item, index) => {
if (index < 5) {
fileListArr1.push(item);
}
});
this.fileList = fileListArr1;
} else {
this.flag = false;
}
}
点击更多的时候,
moreImge() {
this.flag = false;
this.fileList = this.imgArr;
},