Element-Plus 图片预览多种实现方法

最新推荐文章于 2024-04-30 10:48:26 发布

我总是词不达意

最新推荐文章于 2024-04-30 10:48:26 发布

阅读量4.6k

点赞数 11

分类专栏： element-ui 前端 vue3 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_43743175/article/details/135462528

版权

前端同时被 3 个专栏收录

86 篇文章 3 订阅

订阅专栏

25 篇文章 1 订阅

订阅专栏

element-ui

16 篇文章 1 订阅

订阅专栏

效果

需求

项目中需要对图片进行放大预览操作

解决方案

使用 el-image 自带的预览功能

使用 el-image-preview 组件进行预览

element-plus中有 <el-image-viewer/> 组件，官方文档并未说明，像普通组件一样使用即可,可通过任意点击事件实现图片预览，而非el-image组件只能通过点击图片实现预览

使用 el-image 进行预览（官方示例）

<template>
  <div class="demo-image__preview">
    <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList" fit="cover" />
  </div>
</template>

<script lang="ts" setup>
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>

使用 el-image-preview 进行预览

<template>
  <div>
    <el-image :src="url" @click="() => { showViewer = true }" />
    <div class="demo-image__preview">
      <!-- element-plus内部组件 -->
      <el-image-viewer @close="() => { showViewer = false }" v-if="showViewer" :url-list="previewList" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const url = ref('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg');
const previewList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]);

const showViewer = ref(false);
</script>

扩展功能（实现和Upload组件照片墙一样的效果）

<template>
  <div>
    <div v-for="(item, index) in previewList" :key="index" class="maskContainer previewBox">
      <div class="demo-image__preview">
        <el-image :src="item" :preview-src-list="[item]" class="originalImg" fit="cover" />
      </div>
      <div class="mask">
        <div class="zoomInImg svgBox" @click="showImgView('originalImg', index)">
          <el-icon size="30">
            <ZoomIn />
          </el-icon>
        </div>
        <div class="deleteImg svgBox">
          <el-icon size="30">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const previewList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]);

const showImgView = (domClass, index) => {
  console.log(index)
  nextTick(() => {
    let dom = document.getElementsByClassName(domClass);
    // console.log("🚀 ~ file: a.vue:40 ~ nextTick ~ dom:", dom)
    dom[index].firstElementChild.click(); //调用 el-image 的预览方法
  })
}
</script>

<style lang="scss" scoped>
.maskContainer {
  display: inline-block;
  position: relative;
  line-height: 0;
  width: 400px;
  height: 300px;
  margin-left: 20px;

  .originalImg {
    width: 400px;
    height: 300px;
  }

  &:hover {
    .mask {
      opacity: 1;
    }

    img {
      transform: scale(1.1);
    }
  }

  .mask {
    transition: all 0.5s;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    .svgBox {
      height: 50px;
      width: 50px;
      background: rgb(#000, 0.3);
      border-radius: 50%;
      margin: 10px;
      padding: 10px;
      cursor: pointer;
    }

    .zoomInImg,
    .deleteImg {
      color: #fff;
    }
  }
}
</style>

或者

<template>
  <div>
    <div v-for="(item, index) in previewList" :key="index" class="maskContainer previewBox">
      <div class="demo-image__preview">
        <img :src="item" class="originalImg" fit="cover" >
      </div>
      <div class="mask">
        <div class="zoomInImg svgBox" @click="showImgView(item, index)">
          <el-icon size="30">
            <ZoomIn />
          </el-icon>
        </div>
        <div class="deleteImg svgBox">
          <el-icon size="30">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>
    <el-image-viewer @close="() => { showViewer = false }" v-if="showViewer" :url-list="urlList" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showViewer = ref(false)
const urlList = ref([])

const previewList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]);

const showImgView = (item, index) => {
  console.log(index)
  showViewer.value = true
  urlList.value = [item]
}
</script>

<style lang="scss" scoped>
.maskContainer {
  display: inline-block;
  position: relative;
  line-height: 0;
  width: 400px;
  height: 300px;
  margin-left: 20px;

  .originalImg {
    width: 400px;
    height: 300px;
  }

  &:hover {
    .mask {
      opacity: 1;
    }

    img {
      transform: scale(1.1);
    }
  }

  .mask {
    transition: all 0.5s;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    .svgBox {
      height: 50px;
      width: 50px;
      background: rgb(#000, 0.3);
      border-radius: 50%;
      margin: 10px;
      padding: 10px;
      cursor: pointer;
    }

    .zoomInImg,
    .deleteImg {
      color: #fff;
    }
  }
}
</style>