VUE图片预览

<button @click="onPreview(img)">预览</button>
        <el-image-viewer
             v-if="showViewer"
             :on-close="closeViewer"
             :url-list="[url]"
        />

<script>
    // 导入组件
      import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
</script>

export default {

  components: {
        ElImageViewer
  },

  data() {
      return {
          showViewer: false, // 显示查看器
          url: ''
      }
  },

  methods(){
      // 点击按钮预览图片
      onPreview(img) {
      this.url = img
      this.showViewer = true
    },
    // 关闭查看器
      closeViewer() {
      this.showViewer = false
    },

  }