vue iview多张图片大图预览、缩放翻转

vue iview多张图片大图预览、缩放翻转多张图片大图预览、缩放翻转

主要为大家详细介绍了vue iview多张图片大图预览、缩放翻转，具有一定的参考价值，感兴趣的小伙伴们可以

参考一下

本文实例为大家分享了vue iview多张图片大图预览，可缩放翻转，供大家参考，具体内容如下

先看效果：

完整项目代码地址

具体代码如下：

<style lang="less">

<Card>

<p slot="title">

回单照片

</p>

<div class="demo-upload-list" v-for="(item,index) in opPicsList" :key="index">

<img :src="item.url">

<div class="demo-upload-list-cover">

<Icon type="ios-search-strong" @click.native="handleView(item.name)"></Icon>

</div>

</div>

import iconLeft from "@/images/icon-left.png";

import iconRight from "@/images/icon-right.png";

import iconClose from "@/images/icon-close.png";

import iconRotate from "@/images/icon-rotate.png";

import iconNoImages from "@/images/icon-no-images.png";

export default {

name: "shopping-info",

data() {

return {

bigImage: null,

currentImageName: "",

currentRotate: 0

};

},

props: ['imageList'],

methods: {

loadDetail() {

let vm = this;

API.getFundClearDetail({ orderId: this.$route.query.orderId }).then(

.forEach((element, index) => {

vm.opPicsList.push({

name: index,

url: element

});

});

}

}

}