
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,感謝您對本站的認可!
本文鏈接:http://m.newhan.cn/zhishi/a/1684835282175812.html
版權聲明:本站內容均來自互聯網,僅供演示用,請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系,我們將在24小時內刪除。
本文word下載地址:vueant-design圖片預覽組件,支持旋轉,放大縮小,下載.doc
本文 PDF 下載地址:vueant-design圖片預覽組件,支持旋轉,放大縮小,下載.pdf
| 留言與評論(共有 0 條評論) |