如何点击按钮预览图片——el-image-viewer

Element-ui 官方文档中有大图预览相关组件 传送门：Element-ui 图片组件，但我们不想通过使用 Image 组件的方式（先默认显示预览图片，再通过点击图片实现大图预览查看），又想实现直接预览大图的功能是否可行呢？答案是当然可以。
使用el-image-viewer

template>
  <div class="wrap">
    <div class="content" @click="showImgViewer">打开</div>
    <el-image-viewer 
      v-if="imgViewerVisible" 
      :on-close="closeImgViewer" 
      :url-list="imgList" />
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      imgViewerVisible:false,
      imgList:[
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    };
  },
  components:{
    
     
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  methods: {
    
    
    showImgViewer(){
    
    
      this.imgViewerVisible = true;
      const m = (e) => {
    
     e.preventDefault() };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动

    },
    closeImgViewer(){
    
    
      this.imgViewerVisible = false;
      const m = (e) => {
    
     e.preventDefault() };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
  }
};
</script>

<style lang="scss" scoped>
.content{
    
    
  width: 100%;
  height: 1500px;
  background: pink;
}
</style>

效果：

注： 有兴趣可以去github看看Element ui源码中 image-viewe。