element图片预览el-image-viewer

el-image-viewer竟然可以单独使用，真不错
1、引入el-image-viewer组件

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

components:{ElImageViewer },

2、界面中引用

<el-button type="text" @click="onPreview">图片预览</el-button>
<el-image-viewer 
   v-if="showViewer" 
   :on-close="closeViewer" 
   :url-list="[img_url]" />

3、方法定义

data(){
  return {
     showViewer: false, // 显示查看器
     img_url:require('图片路径')
  }
},
methods:{
  onPreview() {
    this.showViewer = true
  },
  // 关闭查看器
  closeViewer() {
    this.showViewer = false
  },
}

神马，没有生效，好吧，el-image-viewer写在了el-dialog中，对话框层级太高被覆盖了，zIndex处理一下：

<el-button type="text" @click="onPreview">图片预览</el-button>
<el-image-viewer 
   :zIndex='9999'
   v-if="showViewer" 
   :on-close="closeViewer" 
   :url-list="[img_url]" />

完美！！！