vue点击按钮来触发图片的预览功能，并且解决预览之后，鼠标滚轮页面依然滚动问题；

饿了么有图片预览的组件区别 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’;
所以加了这两句代码。感觉像是组件的不完整问题吧