在页面只显示6张图片

一.效果如下:

 二.思路如下:

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;
    },