elementUI是前端开发中经常需要用到的UI框架,最近在浏览element官网时发现el-image这个组件有图片预览的组件,找到其源码,发这个预览方法是封装好的组件,于是尝试单独在自己的项目中使用这个组件。
支持多图预览、旋转、放大等操作,能够满足日常所需!
1、引入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
2、注册组件
components: { ElImageViewer, }
3、使用组件
<div @click="previewImage(scope.row.dealVoucher)">查看照片</div>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
4、相关方法
closeViewer() {
this.showViewer = false;
},
previewImage(url) {
var arr = url.split(",");
for (var i = 0; i < arr.length; i++) {
arr[i] = this.ossUrl + arr[i] + "!big";
}
this.srcList = arr;
this.showViewer = true;
},```