Element-ui 图片预览滚动时候，禁止遮罩层后面的内容滚动

需求一：不通过点击图片进行预览，通过点击按钮预览图片。且当前页面没有图片

html代码：按钮

1.  
    
2.  
   <el-button @click="showImg"> 点击按钮预览图片</el-button>

html代码：图片

图片的代码由于element-ui的图片预览组件，要求，图片的属性不能是display：none，且透明度不能为0；

因此，我想其实可以设置一个宽度近乎没有值。

1.  
   <el-image
2.  
   ref="preview"
3.  
   style="width: 0.01px; height: 0.01px;"
4.  
   :z-index="99999"
5.  
   :src="url"
6.  
   :preview-src-list="srcList"/>

需求二：图片预览时候，滚动鼠标齿轮，禁止遮罩层后面的内容 滚动JS 代码。

接下来就是JS的内容了。

1.  
   data(){
2.  
   return {
3.  
   url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
4.  
   srcList: [
5.  
   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
6.  
   ],
7.  
   showImgPrew: false
8.  
   }，
9.  
   methods: {
10.  
     
11.  
    /**
12.  
    * 预览大图
13.  
    */
14.  
    showImg () {
15.  
    this.$refs.preview.showViewer = true
16.  
    this.showImgPrew = true
17.  
    document.documentElement.style.overflowY = 'hidden'
18.  
    },
19.  
    doSth () {
20.  
    this.$refs.preview.showViewer = false
21.  
    this.showImgPrew = false
22.  
    document.documentElement.style.overflowY = 'auto'
23.  
    },
24.  
    }
25.  
    }

这篇好文章是转载于：学新通技术网