1. 引入查看大图的组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
2. 注册组件
components: {ElImageViewer},
3. 退出 html
<!-- 大图预览 -->
<el-image-viewer
v-if="showImgViewer"
:on-close="closeImgViewer"
:url-list="imgPreviewList"
/>
4. data 里增加
// 显示图片查看器
showImgViewer: false,
// 查看大图列表
imgPreviewList: [],
5. 图片上传组件增加钩子
:on-preview="openImgViewer"
6. methods 里增加
// 关上图片查看器
openImgViewer(file) {
// 获取要查看的图片长期地址
this.imgPreviewList = [file.url];
// 显示图片查看器
this.showImgViewer = true;
},
// 敞开图片查看器
closeImgViewer() {this.showImgViewer = false;},