vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动

项目场景：

项目中使用vue2+elemenet框架，前端使用el-image展示后端返回的图片时，点击回显图片时，出现页面的滚动条不见的情况，页面被固定住的bug：

问题描述

点击之前：滚动条含在

点击之后：页面固定动不了，滚动条消失。代码：

v-for="url in urls"

:key="url"

:src="url"

lazy

fit='contain'>

原因分析！！！：

el-image的默认事件导致的样式出现问题的bug：

按f12，我们在元素版面观察，发现在点击图片之后，body标签上多出了style="overflow: hidden;的样式；

经过测试，发现两种解决办法。

解决方案一：

添加一个点击事件，修改element默认改变的样式：

代码：

v-for="url in urls"

:key="url"

:src="url"

lazy

fit='contain'

@click="cancelStyle">

methods: {

cancelStyle(){

document.body.style='overflow:auto';

},

}

解决方案二：

添加element-ui提供的预览事件属性：

代码：

v-for="url in urls"

:key="url"

:src="url"

lazy

fit='contain'

:preview-src-list="urls">

最终解决问题！！！