背景:项目中需要对图片进行放大预览操作;
解决方案:
①使用 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]" //如果希望可以左右切换图片,此处可以换成数组 ['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 自带预览功能:
缺点:如果表格为实时动态更新,则点击图片预览时会出现错位的情况文章来源:https://www.toymoban.com/news/detail-605507.html
<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(); //调用 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 进行预览:
适用于非动态更新的表格及动态更新的表格;文章来源地址https://www.toymoban.com/news/detail-605507.html
<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>
到了这里,关于element-plus图片预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!