vue3 原生实现照片墙效果

 实现的效果，因为产品需要照片下面更着展示图片的备注信息。开始用element照片墙组件出现了各种各样的问题，最后参考前辈的代码用原生实现效果

<el-form-item
            class="up_picture"
            label="图片上传："
            :label-width="formLabelWidth"
          >
            <div class="wrap">
              <!-- 上传后显示 -->
              <div id="look">
                <div
                  id="look_img"
                  v-for="(item, index) in backImg"
                  :key="index"
                >
                  <div class="item_img">
                    <img :src="imgPre + item.imgname" alt />
                    <div class="look_event">
                      <img
                        src="https://s1.ax1x.com/2022/08/08/vMEtPO.png"
                        alt
                        title="点击查看"
                        @click="look(item)"
                      />
                      <img
                        src="https://s1.ax1x.com/2022/08/08/vMEaxH.png"
                        alt
                        title="点击删除"
                        @click="deletes(item, index)"
                      />
                    </div>
                  </div>
                  <span class="item_time">{{ item.uptime }}</span>
                </div>
                <!-- 上传图片按钮 -->
                <div id="demo">
                  <input
                    type="file"
                    id="demo_file"
                    accept="image/png, image/gif, image/jpeg"
                    multiple
                    @change="update($event)"
                  />
                  <img
                    src="https://s1.ax1x.com/2022/08/08/vMEwMd.png"
                    alt
                    id="demo_img"
                  />
                </div>
              </div>

              <!-- 图片预览 -->
              <el-dialog v-model="showPre" class="dialog">
                <img
                  :src="imgPre + pvwSrc"
                  alt="Preview Image"
                  class="preview_img"
                />
              </el-dialog>
            </div>
          </el-form-item>

// 添加图片
const upLoadImg = (info) => {
  var formdata = new window.FormData();
  formdata.append("upfile", info);
  axios({
    url: BASE_URL,
    method: "post",
    data: formdata,
  }).then((res) => {
    if (res.status == 200) {
      const imgname = res.data.filename;
      const uptime = getTimer();
      backImg.value?.push({ imgname, uptime });

      imageUrl.value?.push(imgname);
      ElMessage({
        icon: "success",
        message: "图片上传成功",
      });
    } else {
      ElMessage({
        icon: "warning",
        message: "图片上传失败",
      });
    }
  });
};

//图片预览
const look = (item) => {
  showPre.value = true;
  console.log(item);
  pvwSrc.value = item.imgname;
};

// 删除图片
const deletes = (item, index) => {
  backImg.value.splice(index, 1);
  imageUrl.value = imageUrl.value?.filter((el) => el !== item.imgname);
};

.wrap {
  width: 100%;
}
#demo {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  position: relative;
  border: 2px dashed #dcdcdc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 5px 20px 5px;
}

#demo_file {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#demo_img {
  display: block;
  width: 50%;
  height: 50%;
}

#look {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
}

#look_img {
  width: 200px;
  height: 200px;
  margin: 8px 5px 20px 5px;
}
.item_img {
  border: 2px dashed #dcdcdc;
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  position: relative;
  img {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
  }
}
.item_time {
  height: 10px;
}

.look_event {
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    display: block;
    width: 200px;
    height: 0;
    cursor: pointer;
  }
}

.item_img:hover .look_event {
  height: 100%;
  opacity: 70%;
}

.item_img:hover .look_event > img {
  height: 4em;
}

.preview_img {
  width: 450px;
  height: 450px;
}