使用 Element UI 查看大图的组件,查看 Upload 组件上传的图片

1. 引入查看大图的组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2. 注册组件

 components: { ElImageViewer },

3. 加入 html


4. data 里添加

// 显示图片查看器
showImgViewer: false,
// 查看大图列表
imgPreviewList: [],

5. 图片上传组件添加钩子

 :on-preview="openImgViewer"

6. methods 里添加

// 打开图片查看器
openImgViewer(file) {
  // 获取要查看的图片临时地址
  this.imgPreviewList = [file.url];

  // 显示图片查看器
  this.showImgViewer = true;
},
// 关闭图片查看器
closeImgViewer() {
  this.showImgViewer = false;
},

你可能感兴趣的:(前端,vue.js,element-ui)