el-image组件点击图片滚动条消失的解决办法

el-image组件的slot = error可自定义加载失败内容，这个功能可以保护我们的页面整洁漂亮，个人在项目中也经常使用，不过最近却发现了一个巨坑，极其影响用户体验。

最近测试发现在编辑某个商品信息时，滚动条有时会消失，导致页面整个卡住，无法保存商品信息，只能刷新页面后才能再次滚动，影响可以说是非常恶劣了。经过一番掉头发后，我发现了问题所在。

我们知道，el-image可通过 previewSrcList 开启预览大图的功能，而在预览大图时，element-ui会向body标签添加overflow:hidden从而让滚动条消失。而我在GitHub上面查阅element-ui的源码时发现el-image组件在处理点击事件时并没有判断是否开启了预览大图功能，如下:

clickHandler() {
        // don't show viewer when preview is false
        if (!this.preview) {
          return;
        }
        // prevent body scroll
        prevOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        this.showViewer = true;
      },

虽说判断了preview的t/f，但是源码中其他地方并没有操作过preview，因此这个判断失效。我们在使用预览大图功能时是往previewSrcList中传的数组，因此正确的做法应该是根据previewSrcList数组的长度来判断，如下:

clickHandler() {
        // don't show viewer when preview is false
        if (this.previewSrcList.lenght === 0) {
          return;
        }
        // prevent body scroll
        prevOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        this.showViewer = true;
      },

不过我们在项目中直接修改element-ui源码并不可取，因此可在使用el-image时手动添加单击事件，将document.body.style.overflow操作为空，如下:

<template>
  <el-image @click.native="document.body.style.overflow = ''"></el-image>
</template>