element 查看大图组件

注意需要导入组件才可使用

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

代码

<template>
    <div>
      <el-image-viewer 
           v-if="showViewer" 
           :on-close="closeViewer" 
           :url-list="[url]" />
     <el-button @click="onPreview">查看大图</el-button>
    </div>
</template>
<script>
    // 导入组件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
      name: 'showViewer',
      components: { ElImageViewer },
      data() {
        return {
          showViewer: false, // 显示查看器
          url:'https://lovelydong.com/wp-content/themes/Memory-master/img/default_bg.jpg'
        }
      },
      methods: {
        onPreview() {
          this.showViewer = true
        }，
        closeViewer() {
          this.showViewer = false
        }
    }
</script>