antdesign预览图⽚_vueant-design图⽚预览组件，⽀持旋转，
放⼤缩⼩，下载
class="picPreview":title="title":visible="imgListShow"@cancel="$emit('close')":bodyStyle="moduleCenter"
>
v-for="(item,index) in imgList":key="item":src="item":class="{ changeColor:changeColor ==
index}"@click="handlerImg(item,index)"
/>
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: ""},
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;
}
}
},
ant安装包
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;
}
}returnarray;
},//判断滚动⽅向
handleScroll(e) {this.scale(-e.deltaY);
},//点击图⽚显⽰
handlerImg(furl, index) {this.currentRotate = 0;this.currentScale = ateScale();if (this.$refs.singleImg)
{this.$refs.singleImg.style.left = 0;this.$refs.p = 0;
}this.furl =furl;this.changeColor =index;if(
&&ElementsByClassName("originStyle")[0].style
) {
"relative";
}
},
handleCurrentChange(val) {
const changeColor= this.changeColor +val;if (changeColor === this.imgList.length || changeColor === -1) {return;
}this.currentRotate = 0;this.currentScale = ateScale();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 += ateScale();
},
rotateR() {this.currentRotate -= ateScale();
},//缩放 放⼤
scale(type) {if (type >= 0) {this.currentScale += 0.ateScale();
}else{this.currentScale -= 0.1;if (this.currentScale <= 0.1) {this.currentScale = 0.ateScale(); }ateScale();
}
}
},
downloadIamge(imgsrc, name) {//下载图⽚地址和图⽚名

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