vue?element-plus圖片預(yù)覽實現(xiàn)方法
更新時間：2023年07月26日 15:43:59 作者：Icyya_
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實現(xiàn)的相關(guān)資料,最近的項目中有圖片預(yù)覽的場景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下
背景：
項目中需要對圖片進行放大預(yù)覽操作；
解決方案：
①使用 el-image 自帶的預(yù)覽功能；
②使用 el-image-preview 組件進行預(yù)覽；
一. 使用 el-image 進行預(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)用到項目中（完整代碼）：
<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 進行預(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. 效果圖：
三. 擴展功能（給圖片加蒙版，在蒙版上設(shè)置點擊放大的按鈕）：
1. 預(yù)期效果：
2. 使用 el-image 自帶預(yù)覽功能：
缺點：如果表格為實時動態(tài)更新，則點擊圖片預(yù)覽時會出現(xiàn)錯位的情況
<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 進行預(yù)覽：
適用于非動態(tài)更新的表格及動態(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ù)覽實現(xiàn)的文章就介紹到這了,更多相關(guān)element-plus圖片預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本文通過實例代碼給大家介紹了vue 下列表側(cè)滑操作,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)圖片驗證碼生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
uniapp中如何基于vue3實現(xiàn)輸入驗證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個手機驗證碼輸入框組件,通過封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實現(xiàn)驗證碼輸入功能,適合需要增加手機驗證碼驗證功能的開發(fā)者參考使用2024-09-09
vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
詳解vue中使用axios對同一個接口連續(xù)請求導(dǎo)致返回數(shù)據(jù)混亂的問題
這篇文章主要介紹了詳解vue中使用axios對同一個接口連續(xù)請求導(dǎo)致返回數(shù)據(jù)混亂的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在開發(fā)前端應(yīng)用時,地圖選擇器是一個非常常見的需求,本文將一步步展示如何使用?Vue?3?和?Element?Plus?來實現(xiàn)一個百度地圖位置選擇器組件,有需要的可以參考一下2025-04-04
這是一個支持二、八、十、十六進制實時同步轉(zhuǎn)換的在線工具。采用十進制中轉(zhuǎn)策略，內(nèi)置防死鎖、數(shù)據(jù)清洗、正則校驗與格式化顯示（前綴/分組），并支持2–36進制自定義轉(zhuǎn)換。代碼簡潔健壯，兼顧實用性與可維護性。2026-01-01
vue實現(xiàn)拖動左側(cè)導(dǎo)航欄變大變小
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)拖動左側(cè)導(dǎo)航欄變大變小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue?項目運行完成后自動打開瀏覽器的多種實現(xiàn)方法，方法一比較適用于vue3，每種方法通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-02-02