本文实例为大家分享了vue iview多张图片大图预览，可缩放翻转，供大家参考，具体内容如下
先看效果：
完整项目代码地址
具体代码如下：
<style lang="less">
@import "../advanced-router.less";
</style><template>
<div class="balance-accounts">
<Row class-name="detail-row">
<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>
</Card>
</Row>
</div>
</template>
<script>
import * as API from "@/api/adminApi";
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 {
opPicsList: [
{
name: "none",
url: iconNoImages
}
],
bigImage: null,
currentImageName: "",
currentRotate: 0
};
},
props: ['imageList'],
methods: {
loadDetail() {
let vm = this;
API.getFundClearDetail({ orderId: this.$route.query.orderId }).then(
data => {
if (data.resultObj.detail) {
if (data.resultObj.detail.opPics.length > 0) {
vm.opPicsList.splice(0, vm.opPicsList.length);
data.resultObj.detail.opPics
.split(",")
.forEach((element, index) => {
vm.opPicsList.push({
name: index,
url: element
});
});
}
}
}
);
},
rollImg() {
/* 获取当前页面的缩放比
若未设置zoom缩放比，则为默认100%，即1，原图大小
*/
var zoom = parseInt(this.bigImage.style.zoom) || 100;
/* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
*/
zoom += event.wheelDelta / 12;
/* 如果缩放比大于0，则将缩放比加载到页面元素 */
if (zoom >= 100) {
this.bigImage.style.zoom = zoom + "%";
}
/* 如果缩放比不大于0，则返回false，不执行操作 */
return false;
},
handleView(name) {
if (this.opPicsList[0].name == "none") {
this.$Message.error("没有图片哦~");
return;
}
