vue+element放大图片(含弹窗内)

夏弥落花成雨

已于 2023-08-07 09:12:36 修改

阅读量301

点赞数

文章标签： vue.js 前端 javascript

于 2023-06-26 16:02:31 首次发布

本文链接：https://blog.csdn.net/weixin_48369262/article/details/131399637

版权

Html：

单张：

 <el-col :span="24">
                    <el-form-item label="图片" prop="picUrls" >
                        <el-upload
                            ref="upload"
                            :action="url + '********'"
                            :headers="headerObj"
                            list-type="picture-card"
                            size="mini"
                            :disabled="true"
                            
                        >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:150px;height:150px"  @click="showImagePreview">
                        </el-upload>
                    </el-form-item>
                </el-col>
//关键
<img v-if="imageUrl" :src="imageUrl" @click="showImagePreview">

多张：

 <el-upload
              ref="upload"
              :action="url + '*********'"
              :headers="headerObj"
              :on-success="imgSuccess"
              :on-remove="handleRemove"
              list-type="picture-card"
              accept="bmp, jpg, png, gif, jpeg"
              multiple
              size="mini"
              :disabled="disabled"
              :file-list="personPicList"
              :on-preview="showImagePreview"
              :class="{ hide: hideUploadCard }"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div v-for="(item, index) in personPicList" :key="index">
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="imageUrl"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file, index)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, index)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </div>
            </el-upload>

js：

单张：

showImagePreview() {
            const image = new Image();
            image.src = this.imageUrl;
            image.onload = () => {
                // 创建弹出层
                const previewContainer = document.createElement('div');
                previewContainer.style.position = 'fixed';
                previewContainer.style.top = 0;
                previewContainer.style.bottom = 0;
                previewContainer.style.left = 0;
                previewContainer.style.right = 0;
                previewContainer.style.backgroundColor = 'rgba(0,0,0,0.8)';
                previewContainer.style.display = 'flex';
                previewContainer.style.justifyContent = 'center';
                previewContainer.style.alignItems = 'center';
                //图层位置:
                previewContainer.style.zIndex = '9999';
                document.body.appendChild(previewContainer);
                // 在弹出层中添加图片
                const previewImage = document.createElement('img');
                previewImage.src = this.imageUrl;
                previewImage.style.maxWidth = '80%';
                previewImage.style.maxHeight = '80%';
                previewContainer.appendChild(previewImage);
                // 点击弹出层，关闭预览
                previewContainer.addEventListener('click', () => {
                    document.body.removeChild(previewContainer);
                });
            };
        },

多张：

showImagePreview(file) {
      console.log(file.url);
      const image = new Image();
      image.src = file.url;
      image.onload = () => {
        // 创建弹出层
        const previewContainer = document.createElement("div");
        previewContainer.style.position = "fixed";
        previewContainer.style.top = 0;
        previewContainer.style.bottom = 0;
        previewContainer.style.left = 0;
        previewContainer.style.right = 0;
        previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
        previewContainer.style.display = "flex";
        previewContainer.style.justifyContent = "center";
        previewContainer.style.alignItems = "center";
        previewContainer.style.zIndex = "9999";
        document.body.appendChild(previewContainer);
        // 在弹出层中添加图片
        const previewImage = document.createElement("img");
        previewImage.src = file.url;
        previewImage.style.maxWidth = "80%";
        previewImage.style.maxHeight = "80%";
        previewContainer.appendChild(previewImage);
        // 点击弹出层，关闭预览
        previewContainer.addEventListener("click", () => {
          document.body.removeChild(previewContainer);
        });
      };
    },