vxe-pc-ui 3.7.7 → 3.7.9

package/lib/image/src/preview.js

@@ -253,7 +253,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
       }
     },
-    handleChange: function handleChange(isNext) {
+    handleChangeEvent: function handleChangeEvent(evnt, isNext) {
       var $xeImagePreview = this;
       var reactData = $xeImagePreview.reactData;
       var activeIndex = reactData.activeIndex || 0;
@@ -271,13 +271,21 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           activeIndex--;
         }
       }
-      $xeImagePreview.resetStyle();
+      var imgUrl = imgList[activeIndex || 0];
       reactData.activeIndex = activeIndex;
+      $xeImagePreview.resetStyle();
       $xeImagePreview.emitModel(activeIndex);
+      $xeImagePreview.dispatchEvent('change', {
+        url: imgUrl,
+        activeIndex: activeIndex
+      }, evnt);
     },
-    handleRotateImg: function handleRotateImg(isRight) {
+    handleRotateImgEvent: function handleRotateImgEvent(evnt, isRight) {
       var $xeImagePreview = this;
       var reactData = $xeImagePreview.reactData;
+      var imgList = $xeImagePreview.computeImgList;
+      var activeIndex = reactData.activeIndex;
+      var imgUrl = imgList[activeIndex || 0];
       var offsetRotate = reactData.offsetRotate;
       if (isRight) {
         offsetRotate += 90;
@@ -285,6 +293,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         offsetRotate -= 90;
       }
       reactData.offsetRotate = offsetRotate;
+      $xeImagePreview.dispatchEvent('rotate', {
+        url: imgUrl,
+        rotateValue: offsetRotate
+      }, evnt);
     },
     handlePct11: function handlePct11() {
       var $xeImagePreview = this;
@@ -389,10 +401,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
             $xeImagePreview.handlePct11();
             break;
           case 'rotateLeft':
-            $xeImagePreview.handleRotateImg(false);
+            $xeImagePreview.handleRotateImgEvent(evnt, false);
             break;
           case 'rotateRight':
-            $xeImagePreview.handleRotateImg(true);
+            $xeImagePreview.handleRotateImgEvent(evnt, true);
             break;
           case 'print':
             $xeImagePreview.handlePrintImg();
@@ -474,21 +486,21 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         if (hasShiftKey) {
           reactData.offsetLeft -= 1;
         } else {
-          $xeImagePreview.handleChange(false);
+          $xeImagePreview.handleChangeEvent(evnt, false);
         }
       } else if (isRightArrow) {
         evnt.preventDefault();
         if (hasShiftKey) {
           reactData.offsetLeft += 1;
         } else {
-          $xeImagePreview.handleChange(true);
+          $xeImagePreview.handleChangeEvent(evnt, true);
         }
       } else if (isR && isControlKey) {
         evnt.preventDefault();
         if (hasShiftKey) {
-          $xeImagePreview.handleRotateImg(false);
+          $xeImagePreview.handleRotateImgEvent(evnt, false);
         } else {
-          $xeImagePreview.handleRotateImg(true);
+          $xeImagePreview.handleRotateImgEvent(evnt, true);
         }
       } else if (isP && isControlKey) {
         evnt.preventDefault();
@@ -585,8 +597,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       })]), imgList.length > 1 ? h('div', {
         class: 'vxe-image-preview--previous-btn',
         on: {
-          click: function click() {
-            $xeImagePreview.handleChange(false);
+          click: function click(evnt) {
+            $xeImagePreview.handleChangeEvent(evnt, false);
           }
         }
       }, [h('i', {
@@ -594,8 +606,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       })]) : (0, _ui.renderEmptyElement)($xeImagePreview), imgList.length > 1 ? h('div', {
         class: 'vxe-image-preview--next-btn',
         on: {
-          click: function click() {
-            $xeImagePreview.handleChange(true);
+          click: function click(evnt) {
+            $xeImagePreview.handleChangeEvent(evnt, true);
           }
         }
       }, [h('i', {

package/lib/image/src/preview.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImagePreview",props:{value:Number,urlList:Array,urlField:{type:String,default:function(){return(0,_ui.getConfig)().imagePreview.urlField}},maskClosable:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.maskClosable}},marginSize:{type:String,default:function(){return(0,_ui.getConfig)().imagePreview.marginSize}},showPrintButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.showPrintButton}},showDownloadButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.showDownloadButton}},toolbarConfig:Object,beforeDownloadMethod:Function,downloadMethod:Function},provide:function(){return{$xeImagePreview:this}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{activeIndex:0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}}},computed:Object.assign(Object.assign({},{}),{computeUrlProp:function(){return this.urlField||"url"},computeMarginSize:function(){return _xeUtils.default.toNumber(this.marginSize||0)||16},computeToolbarOpts:function(){return Object.assign({},(0,_ui.getConfig)().imagePreview.toolbarConfig,this.toolbarConfig)},computeRotateText:function(){var e=this.reactData.offsetRotate;return e?"".concat(e,"°"):"0°"},computeScaleText:function(){var e=this.reactData.offsetScale;return e?"".concat(_xeUtils.default.ceil(100*(1+e)),"%"):"100%"},computeImgList:function(){var e=this.urlList,t=this.computeUrlProp;return e&&e.length?e.map(function(e){return _xeUtils.default.isString(e)?e:e[t]||""}):[]},computeImgTransform:function(){var e=this.reactData,t=e.offsetScale,n=e.offsetRotate,o=e.offsetLeft,a=e.offsetTop,e=[],i=1;if(t&&e.push("scale(".concat(i=1+t,")")),n&&e.push("rotate(".concat(n,"deg)")),o||a){var r=o/=i,s=a/=i;if(n)switch(n%360){case 90:case-270:r=a,s=-o;break;case 180:case-180:r=-o,s=-a;break;case 270:case-90:r=-a,s=o}e.push("translate(".concat(r,"px, ").concat(s,"px)"))}return e.length?e.join(" "):""}}),methods:{dispatchEvent:function(e,t,n){this.$emit(e,(0,_ui.createEvent)(n,{$imagePreview:this},t))},emitModel:function(e){var t=this,n=t._events;t.$emit("input",e),n&&n.modelValue?t.$emit("modelValue",e):t.$emit("model-value",e)},handleCloseEvent:function(e){this.dispatchEvent("close",{},e)},resetStyle:function(){var e=this.reactData,t=this.$refs.refElem;(0,_dom.removeClass)(t,"is--move"),Object.assign(e,{offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},getOffsetZoomStep:function(){var e=this.reactData.offsetScale,t=.02;return t=-.6<=e&&(t=.04,-.4<=e)&&(t=.07,0<=e)&&(t=.1,3<=e)&&(t=.25,8<=e)&&(t=.4,16<=e)&&(t=.6,24<=e)&&(t=.9,32<=e)&&(t=1.3,39<=e)&&(t=1.9,45<=e)?2.5:t},handleZoom:function(e){var t=this.reactData,n=t.offsetScale,o=this.getOffsetZoomStep();t.offsetScale=e?Number(Math.min(49,n+o).toFixed(2)):Number(Math.max(-.9,n-o).toFixed(2))},handleChange:function(e){var t=this.reactData,n=t.activeIndex||0,o=this.computeImgList;e?n>=o.length-1?n=0:n++:n<=0?n=o.length-1:n--,this.resetStyle(),t.activeIndex=n,this.emitModel(n)},handleRotateImg:function(e){var t=this.reactData,n=t.offsetRotate;e?n+=90:n-=90,t.offsetRotate=n},handlePct11:function(){var e=this.reactData;this.resetStyle(),e.offsetPct11=!0},handlePrintImg:function(){var e=this.reactData.activeIndex,e=this.computeImgList[e||0];_ui.VxeUI.print&&_ui.VxeUI.print({align:"center",pageBreaks:[{bodyHtml:'<img src="'.concat(e,'" style="max-width:100%;max-height:100%;">')}]})},handleDownloadEvent:function(e,t){this.dispatchEvent("download",{url:t},e)},handleDefaultDownload:function(t,n){var o=this;_ui.VxeUI.saveFile&&fetch(n).then(function(e){return e.blob().then(function(e){_ui.VxeUI.saveFile({filename:n,content:e}),o.handleDownloadEvent(t,n)})}).catch(function(){_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.downErr"),status:"error"})})},handleDownloadImg:function(t){var n=this,e=n,o=n.reactData.activeIndex,a=n.computeToolbarOpts.download,a=!_xeUtils.default.isBoolean(a)&&a?Object.assign({},a):{},i=n.computeImgList[o||0],r=e.beforeDownloadMethod||a.beforeDownloadMethod||(0,_ui.getConfig)().imagePreview.beforeDownloadMethod,s=e.downloadMethod||a.downloadMethod||(0,_ui.getConfig)().imagePreview.downloadMethod;Promise.resolve(!r||r({$imagePreview:n,url:i,index:o||0})).then(function(e){e&&(s?Promise.resolve(s({$imagePreview:n,url:i,index:o||0})).then(function(){n.handleDownloadEvent(t,i)}).catch(function(e){return e}):n.handleDefaultDownload(t,i))})},handleOperationBtn:function(e,t){var n=this,o=n.reactData.activeIndex;if(n.computeImgList[o||0])switch(t){case"zoomOut":n.handleZoom(!1);break;case"zoomIn":n.handleZoom(!0);break;case"pctFull":n.resetStyle();break;case"pct11":n.handlePct11();break;case"rotateLeft":n.handleRotateImg(!1);break;case"rotateRight":n.handleRotateImg(!0);break;case"print":n.handlePrintImg();break;case"download":n.handleDownloadImg(e)}},wheelEvent:function(e){e=e.deltaY;0<e?this.handleZoom(!1):e<0&&this.handleZoom(!0)},moveEvent:function(e){var i=this.reactData,r=i.offsetTop,s=i.offsetLeft,l=this.$refs.refElem,t=(e.preventDefault(),document.onmousemove),n=document.onmouseup,c=e.pageX,u=e.pageY,d=this.computeMarginSize;document.onmousemove=function(e){var t=e.pageX,n=e.pageY,o=(0,_dom.getDomNode)(),a=o.visibleHeight,o=o.visibleWidth;e.preventDefault(),(0,_dom.addClass)(l,"is--move"),d<t&&d<n&&t<o-d&&n<a-d&&(i.offsetLeft=s+t-c,i.offsetTop=r+n-u)},document.onmouseup=function(){document.onmousemove=t,document.onmouseup=n,(0,_dom.removeClass)(l,"is--move")}},handleGlobalKeydownEvent:function(e){var t=this,n=t.reactData,o=(0,_dom.hasControlKey)(e),a=e.shiftKey,i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),s=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),c=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.R),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.P);i?(e.preventDefault(),a?--n.offsetTop:t.handleZoom(!0)):r?(e.preventDefault(),a?n.offsetTop+=1:t.handleZoom(!1)):s?(e.preventDefault(),a?--n.offsetLeft:t.handleChange(!1)):l?(e.preventDefault(),a?n.offsetLeft+=1:t.handleChange(!0)):c&&o?(e.preventDefault(),a?t.handleRotateImg(!1):t.handleRotateImg(!0)):u&&o&&(e.preventDefault(),t.handlePrintImg())},handleClickMaskEvent:function(e){this.maskClosable&&e.target===e.currentTarget&&this.dispatchEvent("close",{},e)},renderImgWrapper:function(n){var o=this,a=o.reactData.activeIndex,e=o.computeImgList,i=o.computeImgTransform;return n("div",{class:"vxe-image-preview--img-list",on:{click:o.handleClickMaskEvent}},e.map(function(e,t){t=a===t;return n("img",{class:["vxe-image-preview--img-item",{"is--active":t}],style:t?{transform:i}:{},attrs:{src:e},on:{mousedown:function(e){o.moveEvent(e)}}})}))},renderOperationBtn:function(e,t,n){var o=this,a=o.computeToolbarOpts[t],i=!_xeUtils.default.isBoolean(a)&&a?Object.assign({},a):{};return!1!==a?e("div",{class:"vxe-image-preview--operation-btn",attrs:{title:(0,_ui.getI18n)("vxe.imagePreview.operBtn.".concat(t))},on:{click:function(e){o.handleOperationBtn(e,t)}}},[e("i",{class:i.icon||(0,_ui.getIcon)()[n]})]):(0,_ui.renderEmptyElement)(o)},renderBtnWrapper:function(e){var t=this,n=t.reactData,o=t.showPrintButton,a=t.showDownloadButton,n=n.activeIndex,i=t.computeImgList,r=t.computeRotateText,s=t.computeScaleText,l=t.computeToolbarOpts;return e("div",{class:"vxe-image-preview--btn-wrapper"},[e("div",{class:"vxe-image-preview--close-wrapper"},[e("div",{class:"vxe-image-preview--close-btn",on:{click:t.handleCloseEvent}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_CLOSE})]),e("div",{class:"vxe-image-preview--close-bg"})]),1<i.length?e("div",{class:"vxe-image-preview--previous-btn",on:{click:function(){t.handleChange(!1)}}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_ui.renderEmptyElement)(t),1<i.length?e("div",{class:"vxe-image-preview--next-btn",on:{click:function(){t.handleChange(!0)}}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_ui.renderEmptyElement)(t),e("div",{class:"vxe-image-preview--operation-info"},[e("div",{class:"vxe-image-preview--operation-deg"},r),e("div",{class:"vxe-image-preview--operation-pct"},s)]),e("div",{class:"vxe-image-preview--operation-wrapper"},[e("div",{class:"vxe-image-preview--operation-active-count"},[e("span",{class:"vxe-image-preview--operation-active-current"},"".concat((n||0)+1)),e("span",{class:"vxe-image-preview--operation-active-total"},"/".concat(i.length))]),t.renderOperationBtn(e,"zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),t.renderOperationBtn(e,"zoomIn","IMAGE_PREVIEW_ZOOM_IN"),t.renderOperationBtn(e,"pctFull","IMAGE_PREVIEW_PCT_FULL"),t.renderOperationBtn(e,"pct11","IMAGE_PREVIEW_PCT_1_1"),t.renderOperationBtn(e,"rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),t.renderOperationBtn(e,"rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),o||l.print?t.renderOperationBtn(e,"print","IMAGE_PREVIEW_PRINT"):(0,_ui.renderEmptyElement)(t),a||l.download?t.renderOperationBtn(e,"download","IMAGE_PREVIEW_DOWNLOAD"):(0,_ui.renderEmptyElement)(t)])])},renderVN:function(e){return e("div",{ref:"refElem",class:["vxe-image-preview",{"is--pct11":this.reactData.offsetPct11}],on:{wheel:this.wheelEvent}},[this.renderImgWrapper(e),this.renderBtnWrapper(e)])}},watch:{value:function(e){this.reactData.activeIndex=e,this.resetStyle()}},created:function(){this.reactData.activeIndex=this.value||0},mounted:function(){_ui.globalEvents.on(this,"keydown",this.handleGlobalKeydownEvent)},beforeDestroy:function(){var e=this.$refs.refElem;e&&(0,_dom.removeClass)(e,"is--move"),_ui.globalEvents.off(this,"keydown")},render:function(e){return this.renderVN(e)}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImagePreview",props:{value:Number,urlList:Array,urlField:{type:String,default:function(){return(0,_ui.getConfig)().imagePreview.urlField}},maskClosable:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.maskClosable}},marginSize:{type:String,default:function(){return(0,_ui.getConfig)().imagePreview.marginSize}},showPrintButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.showPrintButton}},showDownloadButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.showDownloadButton}},toolbarConfig:Object,beforeDownloadMethod:Function,downloadMethod:Function},provide:function(){return{$xeImagePreview:this}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{activeIndex:0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}}},computed:Object.assign(Object.assign({},{}),{computeUrlProp:function(){return this.urlField||"url"},computeMarginSize:function(){return _xeUtils.default.toNumber(this.marginSize||0)||16},computeToolbarOpts:function(){return Object.assign({},(0,_ui.getConfig)().imagePreview.toolbarConfig,this.toolbarConfig)},computeRotateText:function(){var e=this.reactData.offsetRotate;return e?"".concat(e,"°"):"0°"},computeScaleText:function(){var e=this.reactData.offsetScale;return e?"".concat(_xeUtils.default.ceil(100*(1+e)),"%"):"100%"},computeImgList:function(){var e=this.urlList,t=this.computeUrlProp;return e&&e.length?e.map(function(e){return _xeUtils.default.isString(e)?e:e[t]||""}):[]},computeImgTransform:function(){var e=this.reactData,t=e.offsetScale,n=e.offsetRotate,a=e.offsetLeft,o=e.offsetTop,e=[],i=1;if(t&&e.push("scale(".concat(i=1+t,")")),n&&e.push("rotate(".concat(n,"deg)")),a||o){var r=a/=i,s=o/=i;if(n)switch(n%360){case 90:case-270:r=o,s=-a;break;case 180:case-180:r=-a,s=-o;break;case 270:case-90:r=-o,s=a}e.push("translate(".concat(r,"px, ").concat(s,"px)"))}return e.length?e.join(" "):""}}),methods:{dispatchEvent:function(e,t,n){this.$emit(e,(0,_ui.createEvent)(n,{$imagePreview:this},t))},emitModel:function(e){var t=this,n=t._events;t.$emit("input",e),n&&n.modelValue?t.$emit("modelValue",e):t.$emit("model-value",e)},handleCloseEvent:function(e){this.dispatchEvent("close",{},e)},resetStyle:function(){var e=this.reactData,t=this.$refs.refElem;(0,_dom.removeClass)(t,"is--move"),Object.assign(e,{offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},getOffsetZoomStep:function(){var e=this.reactData.offsetScale,t=.02;return t=-.6<=e&&(t=.04,-.4<=e)&&(t=.07,0<=e)&&(t=.1,3<=e)&&(t=.25,8<=e)&&(t=.4,16<=e)&&(t=.6,24<=e)&&(t=.9,32<=e)&&(t=1.3,39<=e)&&(t=1.9,45<=e)?2.5:t},handleZoom:function(e){var t=this.reactData,n=t.offsetScale,a=this.getOffsetZoomStep();t.offsetScale=e?Number(Math.min(49,n+a).toFixed(2)):Number(Math.max(-.9,n-a).toFixed(2))},handleChangeEvent:function(e,t){var n=this,a=n.reactData,o=a.activeIndex||0,i=n.computeImgList,t=(t?o>=i.length-1?o=0:o++:o<=0?o=i.length-1:o--,i[o||0]);a.activeIndex=o,n.resetStyle(),n.emitModel(o),n.dispatchEvent("change",{url:t,activeIndex:o},e)},handleRotateImgEvent:function(e,t){var n=this.reactData,a=this.computeImgList[n.activeIndex||0],o=n.offsetRotate;t?o+=90:o-=90,n.offsetRotate=o,this.dispatchEvent("rotate",{url:a,rotateValue:o},e)},handlePct11:function(){var e=this.reactData;this.resetStyle(),e.offsetPct11=!0},handlePrintImg:function(){var e=this.reactData.activeIndex,e=this.computeImgList[e||0];_ui.VxeUI.print&&_ui.VxeUI.print({align:"center",pageBreaks:[{bodyHtml:'<img src="'.concat(e,'" style="max-width:100%;max-height:100%;">')}]})},handleDownloadEvent:function(e,t){this.dispatchEvent("download",{url:t},e)},handleDefaultDownload:function(t,n){var a=this;_ui.VxeUI.saveFile&&fetch(n).then(function(e){return e.blob().then(function(e){_ui.VxeUI.saveFile({filename:n,content:e}),a.handleDownloadEvent(t,n)})}).catch(function(){_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.downErr"),status:"error"})})},handleDownloadImg:function(t){var n=this,e=n,a=n.reactData.activeIndex,o=n.computeToolbarOpts.download,o=!_xeUtils.default.isBoolean(o)&&o?Object.assign({},o):{},i=n.computeImgList[a||0],r=e.beforeDownloadMethod||o.beforeDownloadMethod||(0,_ui.getConfig)().imagePreview.beforeDownloadMethod,s=e.downloadMethod||o.downloadMethod||(0,_ui.getConfig)().imagePreview.downloadMethod;Promise.resolve(!r||r({$imagePreview:n,url:i,index:a||0})).then(function(e){e&&(s?Promise.resolve(s({$imagePreview:n,url:i,index:a||0})).then(function(){n.handleDownloadEvent(t,i)}).catch(function(e){return e}):n.handleDefaultDownload(t,i))})},handleOperationBtn:function(e,t){var n=this,a=n.reactData.activeIndex;if(n.computeImgList[a||0])switch(t){case"zoomOut":n.handleZoom(!1);break;case"zoomIn":n.handleZoom(!0);break;case"pctFull":n.resetStyle();break;case"pct11":n.handlePct11();break;case"rotateLeft":n.handleRotateImgEvent(e,!1);break;case"rotateRight":n.handleRotateImgEvent(e,!0);break;case"print":n.handlePrintImg();break;case"download":n.handleDownloadImg(e)}},wheelEvent:function(e){e=e.deltaY;0<e?this.handleZoom(!1):e<0&&this.handleZoom(!0)},moveEvent:function(e){var i=this.reactData,r=i.offsetTop,s=i.offsetLeft,l=this.$refs.refElem,t=(e.preventDefault(),document.onmousemove),n=document.onmouseup,c=e.pageX,u=e.pageY,d=this.computeMarginSize;document.onmousemove=function(e){var t=e.pageX,n=e.pageY,a=(0,_dom.getDomNode)(),o=a.visibleHeight,a=a.visibleWidth;e.preventDefault(),(0,_dom.addClass)(l,"is--move"),d<t&&d<n&&t<a-d&&n<o-d&&(i.offsetLeft=s+t-c,i.offsetTop=r+n-u)},document.onmouseup=function(){document.onmousemove=t,document.onmouseup=n,(0,_dom.removeClass)(l,"is--move")}},handleGlobalKeydownEvent:function(e){var t=this,n=t.reactData,a=(0,_dom.hasControlKey)(e),o=e.shiftKey,i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),s=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),c=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.R),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.P);i?(e.preventDefault(),o?--n.offsetTop:t.handleZoom(!0)):r?(e.preventDefault(),o?n.offsetTop+=1:t.handleZoom(!1)):s?(e.preventDefault(),o?--n.offsetLeft:t.handleChangeEvent(e,!1)):l?(e.preventDefault(),o?n.offsetLeft+=1:t.handleChangeEvent(e,!0)):c&&a?(e.preventDefault(),o?t.handleRotateImgEvent(e,!1):t.handleRotateImgEvent(e,!0)):u&&a&&(e.preventDefault(),t.handlePrintImg())},handleClickMaskEvent:function(e){this.maskClosable&&e.target===e.currentTarget&&this.dispatchEvent("close",{},e)},renderImgWrapper:function(n){var a=this,o=a.reactData.activeIndex,e=a.computeImgList,i=a.computeImgTransform;return n("div",{class:"vxe-image-preview--img-list",on:{click:a.handleClickMaskEvent}},e.map(function(e,t){t=o===t;return n("img",{class:["vxe-image-preview--img-item",{"is--active":t}],style:t?{transform:i}:{},attrs:{src:e},on:{mousedown:function(e){a.moveEvent(e)}}})}))},renderOperationBtn:function(e,t,n){var a=this,o=a.computeToolbarOpts[t],i=!_xeUtils.default.isBoolean(o)&&o?Object.assign({},o):{};return!1!==o?e("div",{class:"vxe-image-preview--operation-btn",attrs:{title:(0,_ui.getI18n)("vxe.imagePreview.operBtn.".concat(t))},on:{click:function(e){a.handleOperationBtn(e,t)}}},[e("i",{class:i.icon||(0,_ui.getIcon)()[n]})]):(0,_ui.renderEmptyElement)(a)},renderBtnWrapper:function(e){var t=this,n=t.reactData,a=t.showPrintButton,o=t.showDownloadButton,n=n.activeIndex,i=t.computeImgList,r=t.computeRotateText,s=t.computeScaleText,l=t.computeToolbarOpts;return e("div",{class:"vxe-image-preview--btn-wrapper"},[e("div",{class:"vxe-image-preview--close-wrapper"},[e("div",{class:"vxe-image-preview--close-btn",on:{click:t.handleCloseEvent}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_CLOSE})]),e("div",{class:"vxe-image-preview--close-bg"})]),1<i.length?e("div",{class:"vxe-image-preview--previous-btn",on:{click:function(e){t.handleChangeEvent(e,!1)}}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_ui.renderEmptyElement)(t),1<i.length?e("div",{class:"vxe-image-preview--next-btn",on:{click:function(e){t.handleChangeEvent(e,!0)}}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_ui.renderEmptyElement)(t),e("div",{class:"vxe-image-preview--operation-info"},[e("div",{class:"vxe-image-preview--operation-deg"},r),e("div",{class:"vxe-image-preview--operation-pct"},s)]),e("div",{class:"vxe-image-preview--operation-wrapper"},[e("div",{class:"vxe-image-preview--operation-active-count"},[e("span",{class:"vxe-image-preview--operation-active-current"},"".concat((n||0)+1)),e("span",{class:"vxe-image-preview--operation-active-total"},"/".concat(i.length))]),t.renderOperationBtn(e,"zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),t.renderOperationBtn(e,"zoomIn","IMAGE_PREVIEW_ZOOM_IN"),t.renderOperationBtn(e,"pctFull","IMAGE_PREVIEW_PCT_FULL"),t.renderOperationBtn(e,"pct11","IMAGE_PREVIEW_PCT_1_1"),t.renderOperationBtn(e,"rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),t.renderOperationBtn(e,"rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),a||l.print?t.renderOperationBtn(e,"print","IMAGE_PREVIEW_PRINT"):(0,_ui.renderEmptyElement)(t),o||l.download?t.renderOperationBtn(e,"download","IMAGE_PREVIEW_DOWNLOAD"):(0,_ui.renderEmptyElement)(t)])])},renderVN:function(e){return e("div",{ref:"refElem",class:["vxe-image-preview",{"is--pct11":this.reactData.offsetPct11}],on:{wheel:this.wheelEvent}},[this.renderImgWrapper(e),this.renderBtnWrapper(e)])}},watch:{value:function(e){this.reactData.activeIndex=e,this.resetStyle()}},created:function(){this.reactData.activeIndex=this.value||0},mounted:function(){_ui.globalEvents.on(this,"keydown",this.handleGlobalKeydownEvent)},beforeDestroy:function(){var e=this.$refs.refElem;e&&(0,_dom.removeClass)(e,"is--move"),_ui.globalEvents.off(this,"keydown")},render:function(e){return this.renderVN(e)}});

package/lib/image/src/util.js

@@ -15,6 +15,9 @@ var openPreviewImage = exports.openPreviewImage = function openPreviewImage(opti
     }, options);
     var urlList = opts.urlList,
       activeIndex = opts.activeIndex;
+    var _ref = opts.events || {},
+      _rotate = _ref.rotate,
+      _change = _ref.change;
     var modalId = _xeUtils.default.uniqueId('image-preview');
     _core.VxeUI.modal.open({
       id: modalId,
@@ -44,6 +47,16 @@ var openPreviewImage = exports.openPreviewImage = function openPreviewImage(opti
             on: {
               close: function close() {
                 _core.VxeUI.modal.close(modalId);
+              },
+              change: function change(eventParams) {
+                if (_change) {
+                  _change.call(this, eventParams);
+                }
+              },
+              rotate: function rotate(eventParams) {
+                if (_rotate) {
+                  _rotate.call(this, eventParams);
+                }
               }
             }
           });

package/lib/image/src/util.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.openPreviewImage=void 0;var _core=require("@vxe-ui/core"),_preview=_interopRequireDefault(require("./preview")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var openPreviewImage=exports.openPreviewImage=function(e){var r,t,i,l;return _core.VxeUI.modal&&(r=Object.assign({escClosable:!0},e),t=r.urlList,i=r.activeIndex,l=_xeUtils.default.uniqueId("image-preview"),_core.VxeUI.modal.open({id:l,title:"预览",width:"100%",height:"100%",showHeader:!1,showFooter:!1,padding:!1,escClosable:r.escClosable,className:"vxe-image-preview-popup-wrapper",slots:{default:function(e,o){return o(_preview.default,{props:{value:i,urlList:t,urlField:r.urlField,marginSize:r.marginSize,maskClosable:r.maskClosable,toolbarConfig:r.toolbarConfig,showPrintButton:r.showPrintButton,showDownloadButton:r.showDownloadButton,beforeDownloadMethod:r.beforeDownloadMethod,downloadMethod:r.downloadMethod},on:{close:function(){_core.VxeUI.modal.close(l)}}})}}})),Promise.resolve()};
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.openPreviewImage=void 0;var _core=require("@vxe-ui/core"),_preview=_interopRequireDefault(require("./preview")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var openPreviewImage=exports.openPreviewImage=function(e){var r,t,i,l,a,n;return _core.VxeUI.modal&&(r=Object.assign({escClosable:!0},e),t=r.urlList,i=r.activeIndex,l=(e=r.events||{}).rotate,a=e.change,n=_xeUtils.default.uniqueId("image-preview"),_core.VxeUI.modal.open({id:n,title:"预览",width:"100%",height:"100%",showHeader:!1,showFooter:!1,padding:!1,escClosable:r.escClosable,className:"vxe-image-preview-popup-wrapper",slots:{default:function(e,o){return o(_preview.default,{props:{value:i,urlList:t,urlField:r.urlField,marginSize:r.marginSize,maskClosable:r.maskClosable,toolbarConfig:r.toolbarConfig,showPrintButton:r.showPrintButton,showDownloadButton:r.showDownloadButton,beforeDownloadMethod:r.beforeDownloadMethod,downloadMethod:r.downloadMethod},on:{close:function(){_core.VxeUI.modal.close(n)},change:function(e){a&&a.call(this,e)},rotate:function(e){l&&l.call(this,e)}}})}}})),Promise.resolve()};

package/lib/index.umd.js

@@ -13117,14 +13117,14 @@ var defineVxeComponent = function defineVxeComponent(options) {
 };
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-var log_version = "ui v".concat("3.7.7");
+var log_version = "ui v".concat("3.7.9");
 var warnLog = log.create('warn', log_version);
 var errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-var ui_version = "3.7.7";
+var ui_version = "3.7.9";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -34025,7 +34025,7 @@ var IconPicker = VxeIconPicker;
         reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
       }
     },
-    handleChange: function handleChange(isNext) {
+    handleChangeEvent: function handleChangeEvent(evnt, isNext) {
       var $xeImagePreview = this;
       var reactData = $xeImagePreview.reactData;
       var activeIndex = reactData.activeIndex || 0;
@@ -34043,13 +34043,21 @@ var IconPicker = VxeIconPicker;
           activeIndex--;
         }
       }
-      $xeImagePreview.resetStyle();
+      var imgUrl = imgList[activeIndex || 0];
       reactData.activeIndex = activeIndex;
+      $xeImagePreview.resetStyle();
       $xeImagePreview.emitModel(activeIndex);
+      $xeImagePreview.dispatchEvent('change', {
+        url: imgUrl,
+        activeIndex: activeIndex
+      }, evnt);
     },
-    handleRotateImg: function handleRotateImg(isRight) {
+    handleRotateImgEvent: function handleRotateImgEvent(evnt, isRight) {
       var $xeImagePreview = this;
       var reactData = $xeImagePreview.reactData;
+      var imgList = $xeImagePreview.computeImgList;
+      var activeIndex = reactData.activeIndex;
+      var imgUrl = imgList[activeIndex || 0];
       var offsetRotate = reactData.offsetRotate;
       if (isRight) {
         offsetRotate += 90;
@@ -34057,6 +34065,10 @@ var IconPicker = VxeIconPicker;
         offsetRotate -= 90;
       }
       reactData.offsetRotate = offsetRotate;
+      $xeImagePreview.dispatchEvent('rotate', {
+        url: imgUrl,
+        rotateValue: offsetRotate
+      }, evnt);
     },
     handlePct11: function handlePct11() {
       var $xeImagePreview = this;
@@ -34161,10 +34173,10 @@ var IconPicker = VxeIconPicker;
             $xeImagePreview.handlePct11();
             break;
           case 'rotateLeft':
-            $xeImagePreview.handleRotateImg(false);
+            $xeImagePreview.handleRotateImgEvent(evnt, false);
             break;
           case 'rotateRight':
-            $xeImagePreview.handleRotateImg(true);
+            $xeImagePreview.handleRotateImgEvent(evnt, true);
             break;
           case 'print':
             $xeImagePreview.handlePrintImg();
@@ -34246,21 +34258,21 @@ var IconPicker = VxeIconPicker;
         if (hasShiftKey) {
           reactData.offsetLeft -= 1;
         } else {
-          $xeImagePreview.handleChange(false);
+          $xeImagePreview.handleChangeEvent(evnt, false);
         }
       } else if (isRightArrow) {
         evnt.preventDefault();
         if (hasShiftKey) {
           reactData.offsetLeft += 1;
         } else {
-          $xeImagePreview.handleChange(true);
+          $xeImagePreview.handleChangeEvent(evnt, true);
         }
       } else if (isR && isControlKey) {
         evnt.preventDefault();
         if (hasShiftKey) {
-          $xeImagePreview.handleRotateImg(false);
+          $xeImagePreview.handleRotateImgEvent(evnt, false);
         } else {
-          $xeImagePreview.handleRotateImg(true);
+          $xeImagePreview.handleRotateImgEvent(evnt, true);
         }
       } else if (isP && isControlKey) {
         evnt.preventDefault();
@@ -34357,8 +34369,8 @@ var IconPicker = VxeIconPicker;
       })]), imgList.length > 1 ? h('div', {
         class: 'vxe-image-preview--previous-btn',
         on: {
-          click: function click() {
-            $xeImagePreview.handleChange(false);
+          click: function click(evnt) {
+            $xeImagePreview.handleChangeEvent(evnt, false);
           }
         }
       }, [h('i', {
@@ -34366,8 +34378,8 @@ var IconPicker = VxeIconPicker;
       })]) : renderEmptyElement($xeImagePreview), imgList.length > 1 ? h('div', {
         class: 'vxe-image-preview--next-btn',
         on: {
-          click: function click() {
-            $xeImagePreview.handleChange(true);
+          click: function click(evnt) {
+            $xeImagePreview.handleChangeEvent(evnt, true);
           }
         }
       }, [h('i', {
@@ -34447,6 +34459,9 @@ var openPreviewImage = function openPreviewImage(options) {
     }, options);
     var urlList = opts.urlList,
       activeIndex = opts.activeIndex;
+    var _ref = opts.events || {},
+      _rotate = _ref.rotate,
+      _change = _ref.change;
     var modalId = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('image-preview');
     index_esm_VxeUI.modal.open({
       id: modalId,
@@ -34476,6 +34491,16 @@ var openPreviewImage = function openPreviewImage(options) {
             on: {
               close: function close() {
                 index_esm_VxeUI.modal.close(modalId);
+              },
+              change: function change(eventParams) {
+                if (_change) {
+                  _change.call(this, eventParams);
+                }
+              },
+              rotate: function rotate(eventParams) {
+                if (_rotate) {
+                  _rotate.call(this, eventParams);
+                }
               }
             }
           });
@@ -34536,7 +34561,8 @@ var openPreviewImage = function openPreviewImage(options) {
       default: function _default() {
         return getConfig().image.size || getConfig().size;
       }
-    }
+    },
+    getThumbnailUrlMethod: Function
   },
   data: function data() {
     var reactData = {};
@@ -34594,6 +34620,16 @@ var openPreviewImage = function openPreviewImage(options) {
       var $xeImage = this;
       var imgItem = $xeImage.computeImgItem;
       return imgItem ? "".concat(imgItem.url || '') : '';
+    },
+    computeImgThumbnailUrl: function computeImgThumbnailUrl() {
+      var $xeImage = this;
+      var props = $xeImage;
+      var getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().image.getThumbnailUrlMethod;
+      var imgUrl = $xeImage.computeImgUrl;
+      return getThumbnailUrlFn ? getThumbnailUrlFn({
+        url: imgUrl,
+        $image: $xeImage
+      }) : '';
     }
   }),
   methods: {
@@ -34628,7 +34664,15 @@ var openPreviewImage = function openPreviewImage(options) {
             toolbarConfig: toolbarConfig,
             showPrintButton: showPrintButton,
             showDownloadButton: showDownloadButton,
-            maskClosable: maskClosable
+            maskClosable: maskClosable,
+            events: {
+              change: function change(eventParams) {
+                $xeImage.dispatchEvent('click', eventParams, eventParams.$event);
+              },
+              rotate: function rotate(eventParams) {
+                $xeImage.dispatchEvent('click', eventParams, eventParams.$event);
+              }
+            }
           });
         }
         $xeImage.dispatchEvent('click', {
@@ -34647,13 +34691,14 @@ var openPreviewImage = function openPreviewImage(options) {
         circle = props.circle;
       var imgStyle = $xeImage.computeImgStyle;
       var imgUrl = $xeImage.computeImgUrl;
+      var imgThumbnailUrl = $xeImage.computeImgThumbnailUrl;
       var vSize = $xeImage.computeSize;
       return h('img', {
         ref: 'refElem',
         class: ['vxe-image', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--circle', circle)],
         style: imgStyle,
         attrs: {
-          src: imgUrl,
+          src: imgThumbnailUrl || imgUrl,
           alt: alt,
           loading: loading
         },
@@ -34722,7 +34767,8 @@ var image_Image = VxeImage;
       default: function _default() {
         return getConfig().imageGroup.showDownloadButton;
       }
-    }
+    },
+    getThumbnailUrlMethod: Function
   },
   provide: function provide() {
     var $xeImageGroup = this;
@@ -34763,6 +34809,11 @@ var image_Image = VxeImage;
       var $xeImageGroup = this;
       var props = $xeImageGroup;
       return Object.assign({}, getConfig().imageGroup.imageStyle, props.imageStyle);
+    },
+    computeGetThumbnailUrlMethod: function computeGetThumbnailUrlMethod() {
+      var $xeImageGroup = this;
+      var props = $xeImageGroup;
+      return props.getThumbnailUrlMethod || getConfig().imageGroup.getThumbnailUrlMethod;
     }
   }),
   methods: {
@@ -34792,7 +34843,15 @@ var image_Image = VxeImage;
           urlList: imgList,
           toolbarConfig: toolbarConfig,
           showPrintButton: showPrintButton,
-          showDownloadButton: showDownloadButton
+          showDownloadButton: showDownloadButton,
+          events: {
+            change: function change(eventParams) {
+              $xeImageGroup.dispatchEvent('click', eventParams, eventParams.$event);
+            },
+            rotate: function rotate(eventParams) {
+              $xeImageGroup.dispatchEvent('click', eventParams, eventParams.$event);
+            }
+          }
         });
       }
       $xeImageGroup.dispatchEvent('click', {
@@ -34808,6 +34867,7 @@ var image_Image = VxeImage;
       var imgList = $xeImageGroup.computeImgList;
       var vSize = $xeImageGroup.computeSize;
       var imgStyleOpts = $xeImageGroup.computeImgStyleOpts;
+      var getThumbnailUrlMethod = $xeImageGroup.computeGetThumbnailUrlMethod;
       return h('div', {
         class: ['vxe-image-group', _defineProperty({}, "size--".concat(vSize), vSize)]
       }, imgList ? imgList.map(function (item, index) {
@@ -34817,7 +34877,8 @@ var image_Image = VxeImage;
             src: item.url,
             alt: item.alt,
             width: imgStyleOpts.width,
-            height: imgStyleOpts.height
+            height: imgStyleOpts.height,
+            getThumbnailUrlMethod: getThumbnailUrlMethod
           }
         });
       }) : []);