Vue clicks the button to trigger the preview function of the picture, and solves the problem that the mouse wheel page still scrolls after the preview;

Ele.me has image preview components to distinguish between el-image and el-image-viewer. The src attribute of el-image is to specify a picture as the trigger picture preview. Here we need button trigger, of course use el-image-viewer

First look at the application scenarioClick
to view the business card to preview our picture
renderings renderings renderings renderings

Come on, code!

<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>

* There is a problem that the mask layer after the preview cannot cover the scroll bar of the page, and the page is still scrolling with the mouse wheel; *
I
thought the z-index level was not enough, but the problem is not.
The solution is:
open the preview component, control the overflow of the body = 'hidden';
close the preview component, control the overflow of the body = 'auto';
so add these two lines of code. It seems like an incomplete component problem