vueant-design图⽚预览组件，⽀持旋转，放⼤缩⼩，下载
// 图⽚预览组件，⽀持旋转，放⼤缩⼩，下载
<template>
<a-modal
class="picPreview"
:title="title"
:visible="imgListShow"
@cancel="$emit('close')"
:bodyStyle="moduleCenter"
>
<div id="test_3" @mousemove="move" @mouseup="stop" @mouseleave="mouseLeave">
<img @mousedown="start" :src="furl" ref="singleImg" class="originStyle" />
</div>
<template slot="footer">
<div class="allImg">
<a-button @click="handleCurrentChange(-1)" class="changeImg">
<a-icon type="left" />
</a-button>
<div class="imgbox" :class="imgList.length>6?'':'min'" ref="imgbox">
<img
v-for="(item,index) in imgList"
:key="item"
:src="item"
:
class="{ changeColor:changeColor == index}"
@click="handlerImg(item,index)"
/>
</div>
<a-button @click="handleCurrentChange(1)" class="changeImg right">
<a-icon type="left" />
</a-button>
</div>
<div class="ctr-box">
<div class="ctr-box">
<a-button @click="rotateL" title="左旋转">          <a-icon type="redo" />
</a-button>
<a-button @click="rotateR" title="右旋转">          <a-icon type="undo" />
</a-button>
<a-button @click="scale(-1)" title="缩⼩">          <a-icon type="zoom-out" />
</a-button>
<a-button @click="scale(1)" title="放⼤">          <a-icon type="zoom-in" />
</a-button>
<a-button @click="download" title="下载">          <a-icon type="download" />
</a-button>
</div>
</template>
</a-modal>
</template>
<script>
export default {
name: "PicPreview",
data() {
return {
imgListShow: false,
num: 0,
furl: "",
changeColor: -1,
currentRotate: 0,
currentScale: 1,
canDrag: false,
offset_x: 0,
offset_y: 0,
mouse_x: 0,
mouse_y: 0,
moduleCenter: {
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
height: "400px"
},
downUrl: ""
};
},
props: {
title: {
//弹框名称
type: String,
required: false,
default: "图⽚预览"
},
filePreviewShow: {
//是否显⽰
type: Boolean,
required: true,
default: true
},
imgList: {
//图像数组
type: Array,
required: true,
default: function() {
return [];
}
},
currentImg: {
//当前图像
type: String,
required: false,
default: ""
default: ""
},
currentIndex: {
//当前图像下标
type: Number,
required: false,
default: 0
}
},
watch: {
filePreviewShow(newv) {
if (newv) {
this.imgListShow = this.filePreviewShow;
this.imgList = imSpace(this.imgList);
if (this.imgList.length === 0) {
this.furl = "";
this.changeColor = -1;
} else {
this.changeColor = this.currentIndex;
if (this.currentImg) {
this.changeColor = this.imgList.findIndex(
a => a === this.currentImg
);
}
setTimeout(() => {
this.scrollImg(this.changeColor - 5, this.changeColor < 5);
}, 500);
this.furl = this.imgList[this.changeColor];
this.handlerImg(this.furl, this.changeColor);
}
} else {
this.imgListShow = this.filePreviewShow;
this.$refs.imgbox.scrollLeft = 0;
}
},
mounted() {
setTimeout(() => {
this.scrollImg(this.changeColor - 5, this.changeColor < 5);
}, 500);
},
methods: {
trimSpace(array) {
for (var i = 0; i < array.length; i++) {
if (
array[i] == " " ||
array[i] == null ||
typeof array[i] == "undefined"
) {
array.splice(i, 1);
i = i - 1;
}
}
return array;
},
/
/判断滚动⽅向
handleScroll(e) {
this.scale(-e.deltaY);
},
//点击图⽚显⽰
handlerImg(furl, index) {
this.currentRotate = 0;
this.currentScale = 1;
if (this.$refs.singleImg) {
this.$refs.singleImg.style.left = 0;
this.$refs.p = 0;
}
this.furl = furl;
this.changeColor = index;
if (
if (
) {
"relative";
}
},
handleCurrentChange(val) {
const changeColor = this.changeColor + val;
if (changeColor === this.imgList.length || changeColor === -1) {
return;
}
this.currentRotate = 0;
this.currentScale = 1;
this.$refs.singleImg.style.left = 0;
this.$refs.p = 0;
this.furl = this.imgList[changeColor];
this.changeColor = changeColor;
const noScroll =
(val > 0 && changeColor <= 5) ||
(val < 0 && changeColor + 1 >= this.imgList.length - 5);
this.scrollImg(val, noScroll);
},
scrollImg(val, noScroll) {
if (noScroll || !this.$refs.imgbox) {
return;
}
this.$refs.imgbox.scrollLeft += 60 * val;
},
start(e) {
//⿏标左键点击
e.preventDefault && e.preventDefault(); //去掉图⽚拖动响应
if (e.button == 0) {
this.canDrag = true;
//获取需要拖动节点的坐标
this.offset_x = ElementsByClassName(
"originStyle"
)[0].offsetLeft; //x坐标
this.offset_y = ElementsByClassName(
"originStyle"
)[0].offsetTop; //y坐标
//获取当前⿏标的坐标
}
},
move(e) {
e.preventDefault && e.preventDefault();
window.addEventListener("mousewheel", this.handleScroll, true) ||
window.addEventListener("DOMMouseScroll", this.handleScroll, false);
if (this.canDrag == true) {
let _x = e.pageX - use_x;
let _y = e.pageY - use_y;
//设置移动后的元素坐标
let now_x = this.offset_x + _x + "px";
let now_y = this.offset_y + _y + "px";
"absolute";
},
mouseLeave(e) {
this.canDrag = false;
stop(e) {
this.canDrag = false;
},
},
//旋转放⼤
rotateScale() {
if (!this.$refs.singleImg) {
return;
}
this.$refs.singleImg.style.Transform =
"rotate(" +
this.currentRotate +
"deg)" +
"scale(" +
this.currentScale +
")";
this.$refs.singleImg.style.webkitTransform =
"rotate(" +
this.currentRotate +
"deg)" +
"scale(" +
this.currentScale +
")";
this.$refs.singleImg.style.MozTransform =
"rotate(" +
this.currentRotate +
"deg)" +
"scale(" +
this.currentScale +
")";
this.$refs.singleImg.style.msTransform =
"rotate(" +
this.currentRotate +
"deg)" +
"scale(" +
this.currentScale +
")";
this.$refs.ansform =
"rotate(" +
this.currentRotate +
"deg)" +
"scale(" +
this.currentScale +
")";
},
//旋转
rotateL() {
this.currentRotate += 15;
},
rotateR() {
this.currentRotate -= 15;
},
//缩放放⼤
scale(type) {
if (type >= 0) {typeof array
this.currentScale += 0.1;
} else {
this.currentScale -= 0.1;
if (this.currentScale <= 0.1) {
this.currentScale = 0.1;
} else {
}
}
},
downloadIamge(imgsrc, name) {
//下载图⽚地址和图⽚名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.src = imgsrc + "?v=" + Math.random(); // 处理缓存      ssOrigin = "*"; // ⽀持跨域图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。