饿了么有图片预览的组件区别 el-image和el-image-viewer。el-image它的src属性是指定一个图片作为触发图片预览。 这里我们需要按钮触发,当然使用el-image-viewer啦
先看下应用场景
点击 查看名片 来预览我们的图片
效果图效果图效果图
来,上代码!
<template>
<el-descriptions title="服务机构信息" class="description" :column="2">
<el-descriptions-item label="名片">
<el-tag @click="showPre" class="cursor">查看名片</el-tag></el-descriptions-item>
</el-descriptions>
</el-descriptions>
<!-- 图片预览 -->
<el-image-viewer
v-if="showImageViewer"
:url-list="srcList"
hide-on-click-modal
teleported
@close="closePre"
/>
</template>
<script lang="ts" setup>
import {ref,reactive} from "vue"
const srcList =ref( [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',])
const showImageViewer=ref(false)//控制图片预览组件
//点击按钮打开组件
const showPre=()=>{
document.body.style.overflow = 'hidden';
showImageViewer.value = true
}
//关闭预览el-image-viewer组件的事件
const closePre=()=>{
showImageViewer.value=false
document.body.style.overflow = 'auto';
}
</script>
*出现了一个问题预览之后的遮罩层不能覆盖住页面滚动条,鼠标滚轮页面依然滚动问题;
*
以为是z-index层级不够,可问题并不是。
解决方法是;
预览组件打开,控制body的overflow = ‘hidden’;
预览组件\关闭,控制body的overflow = ‘auto’;
所以加了这两句代码。感觉像是组件的不完整问题吧