vue?element-plus圖片預覽實現(xiàn)方法
更新時間：2023年07月26日 15:43:59 作者：Icyya_
這篇文章主要給大家介紹了關于vue?element-plus圖片預覽實現(xiàn)的相關資料,最近的項目中有圖片預覽的場景,也是踩了一些坑,在這里總結一下,需要的朋友可以參考下
背景：
項目中需要對圖片進行放大預覽操作；
解決方案：
①使用 el-image 自帶的預覽功能；
②使用 el-image-preview 組件進行預覽；
一. 使用 el-image 進行預覽：
官方文檔：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" //需要預覽的圖片列表
:initial-index="4" //從哪一張圖片開始預覽
fit="cover" //相當于 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. 應用到項目中（完整代碼）：
<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 進行預覽：
1. el-image-preview 組件使用：
//showViewer 來控制預覽組件的顯示和隱藏
//previewList 為預覽的圖片列表
<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. 效果圖：
三. 擴展功能（給圖片加蒙版，在蒙版上設置點擊放大的按鈕）：
1. 預期效果：
2. 使用 el-image 自帶預覽功能：
缺點：如果表格為實時動態(tài)更新，則點擊圖片預覽時會出現(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 的預覽方法
}
</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 進行預覽：
適用于非動態(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>總結
到此這篇關于vue element-plus圖片預覽實現(xiàn)的文章就介紹到這了,更多相關element-plus圖片預覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
vue3+ts+Vuex中使用websocket協(xié)議方式
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在本篇文章里我們給大家整理了一篇關于優(yōu)化VUE項目的四個總要點，對此有需要的朋友們學習下天。2019-02-02
Vue+elementUI實現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
vue單行文本溢出會出現(xiàn)title提示自定義指令
這篇文章主要為大家介紹了vue單行文本溢出會出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue3?setup語法糖中獲取slot插槽的dom對象代碼示例
slot元素是一個插槽出口,標示了父元素提供的插槽內(nèi)容將在哪里被渲染,這篇文章主要給大家介紹了關于vue3?setup語法糖中獲取slot插槽的dom對象的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
前端Vue通過Minio返回的URL下載文件實現(xiàn)方法
Minio是一個靈活、高性能、開源的對象存儲解決方案,適用于各種存儲需求,并可以與云計算、容器化、大數(shù)據(jù)和應用程序集成,這篇文章主要給大家介紹了關于前端Vue通過Minio返回的URL下載文件實現(xiàn)的相關資料,需要的朋友可以參考下2024-07-07
下面小編就為大家分享一篇基于vue-resource jsonp跨域問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-router提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航，在 vue-router 中，導航守衛(wèi)是一種非常重要的功能，所以本文將詳細講解一下vue-router中的導航守衛(wèi)，感興趣的同學跟著小編一起來看看吧2023-07-07
我們在開發(fā)過程中，有時會遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下，本文就介紹了vue如何根據(jù)url下載非同源文件，感興趣的可以了解一下2021-06-06
Vue-element-admin?導出json和導入json文件的方法
這篇文章主要介紹了Vue-element-admin導出json和導入json文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06