el-image-viewer 图片预览

图片预览（Element-ui）

需求描述：点击某个按钮预览当前图片（直接引入element-ui路径的预览组件，会直接导致ie报不兼容ES6的错误，建议拷贝组件和里面的依赖代码
直接将element-ui的图片预览源码拷贝出来，然后引入到项目中，实现图片预览功能

<template>
    <div>
        <el-button @click="onPreview">预览</el-button>
        <el-image-viewer 
           v-if="showViewer" 
           :on-close="closeViewer" 
           :url-list="[url]" 
        />
    </div>
</template>
<script>
	//方式一
    // 导入组件  必须要导入的组件 直接从element里面导入 
   // import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
   //方式二  
   // 也可以直接将image-viewer 直接提出来 放在组件中 引入到组件中使用
    import ElImageViewer from '@/components/image/image-viewer'
    
    export default {
      components: { ElImageViewer },
      data() {
        return {
          showViewer: false, // 显示查看器
          url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
      },
      methods: {
         // 点击查看器 查看图片
        onPreview() {
          this.showViewer = true
        },
        // 关闭查看器
        closeViewer() {
          this.showViewer = false
        }
      }
</script>

效果图如下：