闲话不说直接代码

第一部分

<el-image-viewer style="z-index: 999999;" v-if="showViewer" @close="closeViewImage" :hide-on-click-modal="true" :url-list="dataImgList" />
<button @click="openViewImage"></button>

第二部分

<script>
export default { 
  data() {
    return {
      showViewer:false,
  dataImgList:[
'图1',
'图2',
  ],
}
  }
  methods: {
    // 停止页面滚动
    stopMouseMove () {
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },
    // 开启页面滚动
    moveMouse () {
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
    openViewImage(){
      this.showViewer=true;
      this.stopMouseMove();
    },
    closeViewImage(){
      this.showViewer=false;
      this.moveMouse();
    },
}
</script>

第三部分相关信息

@element-plus

@阿里云@Element-ui中 使用图片查看器（el-image-viewer) 预览图片