快捷導(dǎo)航

vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法

更新時(shí)間：2023年07月26日 15:43:59 作者：Icyya_

這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下

背景：

項(xiàng)目中需要對(duì)圖片進(jìn)行放大預(yù)覽操作；

解決方案：

①使用 el-image 自帶的預(yù)覽功能；

②使用 el-image-preview 組件進(jìn)行預(yù)覽；

一. 使用 el-image 進(jìn)行預(yù)覽：

官方文檔：Image 圖片 | Element Plus

1. 官方示例：

<template>
  <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="url" 
      :zoom-rate="1.2"
      :preview-src-list="srcList" //需要預(yù)覽的圖片列表
      :initial-index="4" //從哪一張圖片開始預(yù)覽
      fit="cover" //相當(dāng)于 object-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>

2. 應(yīng)用到項(xiàng)目中（完整代碼）：

<template>
  <div>
    <el-table :data="initUserFileList" style="width: 100%" table-layout="auto">
        <el-table-column prop="originalImg" label="Original Image" width="180">
            <template #default="scope">
              <div class="maskContainer previewBox">
                <div class="demo-image__preview">
                  <el-image
                    :src="scope.row.originalImg"
                    :zoom-rate="1.2"
                    :preview-src-list="[scope.row.originalImg]" //如果希望可以左右切換圖片，此處可以換成數(shù)組 ['imageUrl','imageUrl','imageUrl',...]
                    :initial-index="4"
                    class="originalImg"
                    hide-on-click-modal
                  />
                </div>
              </div>
            </template>
          </el-table-column>
      </el-table>
   </div>
</template>
 
<script setup>
import {ref, onMounted} from 'vue'
 
const initUserFileList = ref([]);
const getInitUserFileList = async () => {
    let res = await getUserFileList(); //此處的 getUserFileList 為獲取圖片列表的方法
    if (res.code === 1) {
        initUserFileList.value = res.data.paginate;
    } else {
        ElMessage.warning(res.msg)
        return false;
    }
}
 
onMounted(() => { 
    getInitUserFileList();    
});
</script>

3. 大致效果圖：

二. 使用 el-image-preview 進(jìn)行預(yù)覽：

1. el-image-preview 組件使用：

//showViewer 來控制預(yù)覽組件的顯示和隱藏
//previewList 為預(yù)覽的圖片列表
 
<div class="demo-image__preview">
    <el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer" :url-list="previewList" />
</div>

2. 使用示例：

<template>
    <div>
        <el-image
                :src="url"
                :zoom-rate="1.2"
                :initial-index="4"
                class="originalImg"
                @click="()=>{showViewer = true}"
        />
        <div class="demo-image__preview">
            <el-image-viewer hide-on-click-modal @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>

3. 效果圖：

三. 擴(kuò)展功能（給圖片加蒙版，在蒙版上設(shè)置點(diǎn)擊放大的按鈕）：

1. 預(yù)期效果：

2. 使用 el-image 自帶預(yù)覽功能：

缺點(diǎn)：如果表格為實(shí)時(shí)動(dòng)態(tài)更新，則點(diǎn)擊圖片預(yù)覽時(shí)會(huì)出現(xiàn)錯(cuò)位的情況

<template>
    <div>
        <el-table ref="imgTableRef" :header-cell-style="{'text-align':'center'}" :data="previewList" style="width: 100%">
            <el-table-column prop="imagePath" label="Original Image" width="200">
                <template #default="scope">
                    <div class="maskContainer previewBox">
                        <div class="demo-image__preview">
                            <el-image :src="scope.row"
                                      :zoom-rate="1.2"
                                      :preview-src-list="[scope.row]"
                                      :initial-index="4"
                                      class="originalImg"
                                      hide-on-click-modal
                            />
                        </div>
                        <div class="mask">
                            <div class="downloadImg svgBox">
                                <download/>
                            </div>
                            <div class="zoomInImg svgBox" @click="showImgView('originalImg', scope.$index)">
                                <zoom-in/>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </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)
    let dom = document.getElementsByClassName(domClass);
    dom[index].firstChild.click(); //調(diào)用 el-image 的預(yù)覽方法
}
</script>
 
<style lang="scss" scoped>
.maskContainer {
  position: relative;
  line-height: 0;
 
  &: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;
    }
 
    svg {
      color: #fff;
      width: 30px;
      height: 30px;
    }
  }
}
</style>

3. 使用 el-image-preview 進(jìn)行預(yù)覽：

適用于非動(dòng)態(tài)更新的表格及動(dòng)態(tài)更新的表格；

<template>
    <div>
        <div class="demo-image__preview">
            <el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer" :url-list="previewList" />
        </div>
        <el-table ref="imgTableRef" :header-cell-style="{'text-align':'center'}" :data="initFileList" style="width: 100%">
            <el-table-column prop="imagePath" label="Original Image" width="200">
                <template #default="scope">
                    <div class="maskContainer previewBox">
                        <div class="demo-image__preview">
                            <el-image :src="scope.row" class="originalImg" lazy>
                                <template #error>
                                    <div class="image-slot el-image__error">
                                        <el-icon :size="30"><PictureFilled /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </div>
                        <div class="mask">
                            <div class="downloadImg svgBox">
                                <download/>
                            </div>
                            <div class="zoomInImg svgBox" @click="showImgView(scope.row)">
                                <zoom-in/>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
 
<script setup>
import {ref} from 'vue'
 
const initFileList = 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);
const previewList = ref([]);
const showImgView = (src) => {
    showViewer.value = true;
    previewList.value = [src]
};
</script>
 
<style lang="scss" scoped>
.maskContainer {
  position: relative;
  line-height: 0;
 
  &: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;
    }
 
    svg {
      color: #fff;
      width: 30px;
      height: 30px;
    }
  }
}
</style>

總結(jié)

到此這篇關(guān)于vue element-plus圖片預(yù)覽實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element-plus圖片預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: