vueant-design图⽚预览组件,⽀持旋转,放⼤缩⼩,下载
// 图⽚预览组件,⽀持旋转,放⼤缩⼩,下载
class="picPreview" :title="title" :visible="imgListShow" @cancel="$emit('clo')" :bodyStyle="moduleCenter" > v-for="(item,index) in imgList" :key="item" :src="item" :class="{ changeColor:changeColor == index}" @click="handlerImg(item,index)" /> 左旋转 右旋转 缩⼩ 放⼤ 下载 export default { name: "PicPreview", data() { return { imgListShow: fal, num: 0, furl: "", changeColor: -1, currentRotate: 0, currentScale: 1, canDrag: fal, offt_x: 0, offt_y: 0, mou_x: 0, mou_y: 0, moduleCenter: { display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", height: "400px" }, downUrl: "" }; }, props: { title: { // 弹框名称 type: String, required: fal, default: "" 图⽚预览 }, filePreviewShow: { // 是否显⽰ type: Boolean, required: true, default: true }, imgList: { // 图像数组 type: Array, required: true, default: function() { return []; } }, currentImg: { // 当前图像 type: String, required: fal, default: "" default: "" }, currentIndex: { // 当前图像下标 type: Number, required: fal, default: 0 } }, watch: { filePreviewShow(newv) { if (newv) { this.imgListShow = this.filePreviewShow; this.imgList = this.trimSpace(this.imgList); if (this. === 0) { this.furl = ""; this.changeColor = -1; } el { this.changeColor = this.currentIndex; if (this.currentImg) { this.changeColor = this.dex( a => a === this.currentImg ); } tTimeout(() => { this.scrollImg(this.changeColor - 5, this.changeColor < 5); }, 500); this.furl = this.imgList[this.changeColor]; this.handlerImg(this.furl, this.changeColor); } } el { this.imgListShow = this.filePreviewShow; this.$Left = 0; EventListener("mouwheel", this.handleScroll, true) || EventListener("DOMMouScroll", this.handleScroll, true); } } }, mounted() { tTimeout(() => { this.scrollImg(this.changeColor - 5, this.changeColor < 5); }, 500); }, methods: { trimSpace(array) { for (var i = 0; i < ; i++) { if ( array[i] == " " || array[i] == null || typeof array[i] == "undefined" ) { (i, 1); i = i - 1; } } return array; }, // 判断滚动⽅向 handleScroll(e) { this.scale(-); }, // 点击图⽚显⽰ handlerImg(furl, index) { this.currentRotate = 0; this.currentScale = 1; this.rotateScale(); if (this.$Img) { this.$ = 0; this.$ = 0; } this.furl = furl; this.changeColor = index; if ( if ( mentsByClassName("originStyle") && mentsByClassName("originStyle")[0] && mentsByClassName("originStyle")[0].style ) { mentsByClassName("originStyle")[0].on = "relative"; } }, handleCurrentChange(val) { const changeColor = this.changeColor + val; if (changeColor === this. || changeColor === -1) { return; } this.currentRotate = 0; this.currentScale = 1; this.rotateScale(); this.$ = 0; this.$ = 0; this.furl = this.imgList[changeColor]; this.changeColor = changeColor; const noScroll = (val > 0 && changeColor <= 5) || (val < 0 && changeColor + 1 >= this. - 5); this.scrollImg(val, noScroll); }, scrollImg(val, noScroll) { if (noScroll || !this.$) { return; } this.$Left += 60 * val; }, start(e) { // ⿏标左键点击 tDefault && tDefault(); // 去掉图⽚拖动响应 if ( == 0) { this.canDrag = true; // 获取需要拖动节点的坐标 this.offt_x = mentsByClassName( "originStyle" )[0].offtLeft; //x 坐标 this.offt_y = mentsByClassName( "originStyle" )[0].offtTop; //y 坐标 // 获取当前⿏标的坐标 this.mou_x = ; this.mou_y = ; } }, move(e) { tDefault && tDefault(); ntListener("mouwheel", this.handleScroll, true) || ntListener("DOMMouScroll", this.handleScroll, fal); if (this.canDrag == true) { let _x = - this.mou_x; let _y = - this.mou_y; // 设置移动后的元素坐标 let now_x = this.offt_x + _x + "px"; let now_y = this.offt_y + _y + "px"; mentsByClassName("originStyle")[0].on = "absolute"; mentsByClassName("originStyle")[0]. = now_y; mentsByClassName("originStyle")[0]. = now_x; } }, mouLeave(e) { g = fal; EventListener("mouwheel", this.handleScroll, true) || EventListener("DOMMouScroll", this.handleScroll, true); }, stop(e) { this.canDrag = fal; }, }, // 旋转放⼤ rotateScale() { if (!this.$Img) { return; } this.$orm = "rotate(" + this.currentRotate + "deg)" + "scale(" + this.currentScale + ")"; this.$Transform = "rotate(" + this.currentRotate + "deg)" + "scale(" + this.currentScale + ")"; this.$nsform = "rotate(" + this.currentRotate + "deg)" + "scale(" + this.currentScale + ")"; this.$sform = "rotate(" + this.currentRotate + "deg)" + "scale(" + this.currentScale + ")"; this.$orm = "rotate(" + this.currentRotate + "deg)" + "scale(" + this.currentScale + ")"; }, // 旋转 rotateL() { this.currentRotate += 15; this.rotateScale(); }, rotateR() { this.currentRotate -= 15; this.rotateScale(); }, // 缩放放⼤ scale(type) { if (type >= 0) { this.currentScale += 0.1; this.rotateScale(); } el { this.currentScale -= 0.1; if (this.currentScale <= 0.1) { this.currentScale = 0.1; this.rotateScale(); } el { this.rotateScale(); } } }, downloadIamge(imgsrc, name) { // 下载图⽚地址和图⽚名 var image = new Image(); // Canvas 解决跨域污染问题 = imgsrc + "?v=" + (); // 处理缓存 rigin = "*"; // ⽀持跨域图⽚ rigin = "*"; // ⽀持跨域图⽚ = function() { var canvas = Element("canvas"); = ; = ; var context = text("2d"); age(image, 0, 0, , ); var url = URL("image/png"); //ba64 得到图⽚的编码数据 var a = Element("a"); // a ⽣成⼀个元素 var event = new MouEvent("click"); // 创建⼀个单击事件 ad = name || "img"; // 设置图⽚名称 = url; // URL 将⽣成的设置为属性 chEvent(event); // a 触发的单击事件 }; }, download() { this.downloadIamge(this.furl, new Date().getTime()); } } }; .picPreview { /deep/ .ant-modal-footer { border-top: 0; .allImg { width: 100%; height: 60px; margin-bottom: 10px; overflow: hidden; display: flex; justify-content: center; align-items: center; .changeImg { height: 100%; width: 50px; cursor: pointer; padding: 0; border: 0; i { font-size: 60px; } &.right { i { bottom: 2px; right: 7px; position: relative; } } } .imgbox { width: 370px; height: 100%; overflow: hidden; margin: 0 auto; border: 1px solid #eee; display: flex; align-items: center; justify-content: start; &.min { justify-content: center; } img { width: 50px; height: 50px; margin: 5px; cursor: pointer; } .changeColor { border: 2px solid #42b983; } } } } .ctr-box { display: flex; justify-content: center; align-content: center; } } /deep/ .ant-modal-body { padding: 0 24px; .originStyle { // position: absolute; left: 0; top: 0; cursor: pointer; // transform-origin: 50% 50%; } #test_3 { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid #eeeeee; // overflow: scroll; display: flex; align-items: center; justify-content: center; img { cursor: move; display: inline-block; vertical-align: middle; } } } } mouLeave幼儿园学期计划-拟态环境
本文发布于:2023-05-23 17:48:01,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/zhishi/a/1684835282175812.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:vueant-design图片预览组件,支持旋转,放大缩小,下载.doc
本文 PDF 下载地址:vueant-design图片预览组件,支持旋转,放大缩小,下载.pdf
留言与评论(共有 0 条评论) |