vxe-pc-ui 4.7.8 → 4.7.9

package/lib/image/src/preview.js

@@ -39,7 +39,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     beforeDownloadMethod: Function,
     downloadMethod: Function
   },
-  emits: ['update:modelValue', 'change', 'download', 'download-fail', 'close'],
+  emits: ['update:modelValue', 'change', 'download', 'download-fail', 'rotate', 'close'],
   setup(props, context) {
     const {
       emit
@@ -234,7 +234,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
       }
     };
-    const handleChange = isNext => {
+    const handleChangeEvent = (evnt, isNext) => {
       let activeIndex = reactData.activeIndex || 0;
       const imgList = computeImgList.value;
       if (isNext) {
@@ -250,11 +250,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           activeIndex--;
         }
       }
-      resetStyle();
+      const imgUrl = imgList[activeIndex || 0];
       reactData.activeIndex = activeIndex;
+      resetStyle();
       emitModel(activeIndex);
+      dispatchEvent('change', {
+        url: imgUrl,
+        activeIndex
+      }, evnt);
     };
-    const handleRotateImg = isRight => {
+    const handleRotateImgEvent = (evnt, isRight) => {
+      const imgList = computeImgList.value;
+      const {
+        activeIndex
+      } = reactData;
+      const imgUrl = imgList[activeIndex || 0];
       let offsetRotate = reactData.offsetRotate;
       if (isRight) {
         offsetRotate += 90;
@@ -262,6 +272,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         offsetRotate -= 90;
       }
       reactData.offsetRotate = offsetRotate;
+      dispatchEvent('rotate', {
+        url: imgUrl,
+        rotateValue: offsetRotate
+      }, evnt);
     };
     const handlePct11 = () => {
       resetStyle();
@@ -359,10 +373,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             handlePct11();
             break;
           case 'rotateLeft':
-            handleRotateImg(false);
+            handleRotateImgEvent(evnt, false);
             break;
           case 'rotateRight':
-            handleRotateImg(true);
+            handleRotateImgEvent(evnt, true);
             break;
           case 'print':
             handlePrintImg();
@@ -444,21 +458,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         if (hasShiftKey) {
           reactData.offsetLeft -= 1;
         } else {
-          handleChange(false);
+          handleChangeEvent(evnt, false);
         }
       } else if (isRightArrow) {
         evnt.preventDefault();
         if (hasShiftKey) {
           reactData.offsetLeft += 1;
         } else {
-          handleChange(true);
+          handleChangeEvent(evnt, true);
         }
       } else if (isR && isControlKey) {
         evnt.preventDefault();
         if (hasShiftKey) {
-          handleRotateImg(false);
+          handleRotateImgEvent(evnt, false);
         } else {
-          handleRotateImg(true);
+          handleRotateImgEvent(evnt, true);
         }
       } else if (isP && isControlKey) {
         evnt.preventDefault();
@@ -538,15 +552,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-image-preview--close-bg'
       })]), imgList.length > 1 ? (0, _vue.h)('div', {
         class: 'vxe-image-preview--previous-btn',
-        onClick() {
-          handleChange(false);
+        onClick(evnt) {
+          handleChangeEvent(evnt, false);
         }
       }, [(0, _vue.h)('i', {
         class: (0, _ui.getIcon)().IMAGE_PREVIEW_PREVIOUS
       })]) : (0, _ui.renderEmptyElement)($xeImagePreview), imgList.length > 1 ? (0, _vue.h)('div', {
         class: 'vxe-image-preview--next-btn',
-        onClick() {
-          handleChange(true);
+        onClick(evnt) {
+          handleChangeEvent(evnt, true);
         }
       }, [(0, _vue.h)('i', {
         class: (0, _ui.getIcon)().IMAGE_PREVIEW_NEXT

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImagePreview",props:{modelValue:Number,urlList:Array,urlField:{type:String,default:()=>(0,_ui.getConfig)().imagePreview.urlField},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.maskClosable},marginSize:{type:String,default:()=>(0,_ui.getConfig)().imagePreview.marginSize},showPrintButton:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.showPrintButton},showDownloadButton:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.showDownloadButton},toolbarConfig:Object,beforeDownloadMethod:Function,downloadMethod:Function},emits:["update:modelValue","change","download","download-fail","close"],setup(s,e){const a=e["emit"];var t=_xeUtils.default.uniqueId();const i=(0,_vue.ref)(),o={refElem:i},c=(0,_vue.reactive)({activeIndex:s.modelValue||0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}),n=(0,_vue.computed)(()=>s.urlField||"url"),_=(0,_vue.computed)(()=>_xeUtils.default.toNumber(s.marginSize||0)||16),u=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().imagePreview.toolbarConfig,s.toolbarConfig)),l=(0,_vue.computed)(()=>{var e=c["offsetRotate"];return e?e+"°":"0°"}),v=(0,_vue.computed)(()=>{var e=c["offsetScale"];return e?_xeUtils.default.ceil(100*(1+e))+"%":"100%"}),d=(0,_vue.computed)(()=>{var e=s["urlList"];const t=n.value;return e&&e.length?e.map(e=>_xeUtils.default.isString(e)?e:e[t]||""):[]}),r=(0,_vue.computed)(()=>{var{offsetScale:e,offsetRotate:o,offsetLeft:a,offsetTop:i}=c,n=[];let r=1;if(e&&(r=1+e,n.push(`scale(${r})`)),o&&n.push(`rotate(${o}deg)`),a||i){let e=a/=r,t=i/=r;if(o)switch(o%360){case 90:case-270:e=i,t=-a;break;case 180:case-180:e=-a,t=-i;break;case 270:case-90:e=-i,t=a}n.push(`translate(${e}px, ${t}px)`)}return n.length?n.join(" "):""}),f={computeImgList:d},m={xID:t,props:s,context:e,reactData:c,getRefMaps:()=>o,getComputeMaps:()=>f},p=(e,t,o)=>{a(e,(0,_ui.createEvent)(o,{$imagePreview:m},t))};t={dispatchEvent:p};const g=e=>{c.activeIndex=e,a("update:modelValue",e)},E=e=>{p("close",{},e)};const h=()=>{var e=i.value;(0,_dom.removeClass)(e,"is--move"),Object.assign(c,{offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},w=()=>{var e=c["offsetScale"];let 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},x=e=>{var t=c["offsetScale"],o=w();c.offsetScale=e?Number(Math.min(49,t+o).toFixed(2)):Number(Math.max(-.9,t-o).toFixed(2))},I=e=>{let t=c.activeIndex||0;var o=d.value;e?t>=o.length-1?t=0:t++:t<=0?t=o.length-1:t--,h(),c.activeIndex=t,g(t)},b=e=>{let t=c.offsetRotate;e?t+=90:t-=90,c.offsetRotate=t},P=()=>{var e=c["activeIndex"],e=d.value[e||0];_ui.VxeUI.print&&_ui.VxeUI.print({align:"center",pageBreaks:[{bodyHtml:`<img src="${e}" style="max-width:100%;max-height:100%;">`}]})},R=(e,t)=>{p("download",{url:t},e)},V=a=>{const i=c["activeIndex"];var e=u.value.download,e=!_xeUtils.default.isBoolean(e)&&e?Object.assign({},e):{};const n=d.value[i||0];var t=s.beforeDownloadMethod||e.beforeDownloadMethod||(0,_ui.getConfig)().imagePreview.beforeDownloadMethod;const r=s.downloadMethod||e.downloadMethod||(0,_ui.getConfig)().imagePreview.downloadMethod;Promise.resolve(!t||t({$imagePreview:m,url:n,index:i||0})).then(e=>{var t,o;e&&(r?Promise.resolve(r({$imagePreview:m,url:n,index:i||0})).then(()=>{R(a,n)}).catch(e=>e):(t=a,o=n,_ui.VxeUI.saveFile&&fetch(o).then(e=>e.blob().then(e=>{_ui.VxeUI.saveFile({filename:o,content:e}),R(t,o)})).catch(()=>{_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.downErr"),status:"error"})})))})},O=(e,t)=>{var o=c["activeIndex"];if(d.value[o||0])switch(t){case"zoomOut":x(!1);break;case"zoomIn":x(!0);break;case"pctFull":h();break;case"pct11":h(),c.offsetPct11=!0;break;case"rotateLeft":b(!1);break;case"rotateRight":b(!0);break;case"print":P();break;case"download":V(e)}},L=e=>{e=e.deltaY;0<e?x(!1):e<0&&x(!0)},C=e=>{const{offsetTop:n,offsetLeft:r}=c,s=i.value,t=(e.preventDefault(),document.onmousemove),o=document.onmouseup,u=e.pageX,l=e.pageY,v=_.value;document.onmousemove=e=>{var{pageX:t,pageY:o}=e,{visibleHeight:a,visibleWidth:i}=(0,_dom.getDomNode)();e.preventDefault(),(0,_dom.addClass)(s,"is--move"),t>v&&o>v&&t<i-v&&o<a-v&&(c.offsetLeft=r+t-u,c.offsetTop=n+o-l)},document.onmouseup=()=>{document.onmousemove=t,document.onmouseup=o,(0,_dom.removeClass)(s,"is--move")}},M=e=>{var t=(0,_dom.hasControlKey)(e),o=e.shiftKey,a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),s=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.R),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.P);a?(e.preventDefault(),o?--c.offsetTop:x(!0)):i?(e.preventDefault(),o?c.offsetTop+=1:x(!1)):n?(e.preventDefault(),o?--c.offsetLeft:I(!1)):r?(e.preventDefault(),o?c.offsetLeft+=1:I(!0)):s&&t?(e.preventDefault(),o?b(!1):b(!0)):u&&t&&(e.preventDefault(),P())},T=e=>{s.maskClosable&&e.target===e.currentTarget&&p("close",{},e)},y=(Object.assign(m,t,{}),(t,e)=>{var o=u.value[t],a=!_xeUtils.default.isBoolean(o)&&o?Object.assign({},o):{};return!1!==o?(0,_vue.h)("div",{class:"vxe-image-preview--operation-btn",title:(0,_ui.getI18n)("vxe.imagePreview.operBtn."+t),onClick(e){O(e,t)}},[(0,_vue.h)("i",{class:a.icon||(0,_ui.getIcon)()[e]})]):(0,_ui.renderEmptyElement)(m)});e=()=>{var e=c["offsetPct11"];return(0,_vue.h)("div",{ref:i,class:["vxe-image-preview",{"is--pct11":e}],onWheel:L},[(()=>{const o=c["activeIndex"];var e=d.value;const a=r.value;return(0,_vue.h)("div",{class:"vxe-image-preview--img-list",onClick:T},e.map((e,t)=>{t=o===t;return(0,_vue.h)("img",{class:["vxe-image-preview--img-item",{"is--active":t}],src:e,style:t?{transform:a}:null,onMousedown(e){C(e)}})}))})(),(()=>{var{showPrintButton:e,showDownloadButton:t}=s,o=c["activeIndex"],a=d.value,i=l.value,n=v.value,r=u.value;return(0,_vue.h)("div",{class:"vxe-image-preview--btn-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--close-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--close-btn",onClick:E},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_CLOSE})]),(0,_vue.h)("div",{class:"vxe-image-preview--close-bg"})]),1<a.length?(0,_vue.h)("div",{class:"vxe-image-preview--previous-btn",onClick(){I(!1)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_ui.renderEmptyElement)(m),1<a.length?(0,_vue.h)("div",{class:"vxe-image-preview--next-btn",onClick(){I(!0)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_ui.renderEmptyElement)(m),(0,_vue.h)("div",{class:"vxe-image-preview--operation-info"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-deg"},i),(0,_vue.h)("div",{class:"vxe-image-preview--operation-pct"},n)]),(0,_vue.h)("div",{class:"vxe-image-preview--operation-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-active-count"},[(0,_vue.h)("span",{class:"vxe-image-preview--operation-active-current"},""+((o||0)+1)),(0,_vue.h)("span",{class:"vxe-image-preview--operation-active-total"},"/"+a.length)]),y("zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),y("zoomIn","IMAGE_PREVIEW_ZOOM_IN"),y("pctFull","IMAGE_PREVIEW_PCT_FULL"),y("pct11","IMAGE_PREVIEW_PCT_1_1"),y("rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),y("rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),e||r.print?y("print","IMAGE_PREVIEW_PRINT"):(0,_ui.renderEmptyElement)(m),t||r.download?y("download","IMAGE_PREVIEW_DOWNLOAD"):(0,_ui.renderEmptyElement)(m)])])})()])};return(0,_vue.watch)(()=>s.modelValue,e=>{c.activeIndex=e,h()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(m,"keydown",M)}),(0,_vue.onBeforeUnmount)(()=>{var e=i.value;e&&(0,_dom.removeClass)(e,"is--move")}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(m,"keydown")}),(0,_vue.provide)("$xeImagePreview",m),m.renderVN=e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImagePreview",props:{modelValue:Number,urlList:Array,urlField:{type:String,default:()=>(0,_ui.getConfig)().imagePreview.urlField},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.maskClosable},marginSize:{type:String,default:()=>(0,_ui.getConfig)().imagePreview.marginSize},showPrintButton:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.showPrintButton},showDownloadButton:{type:Boolean,default:()=>(0,_ui.getConfig)().imagePreview.showDownloadButton},toolbarConfig:Object,beforeDownloadMethod:Function,downloadMethod:Function},emits:["update:modelValue","change","download","download-fail","rotate","close"],setup(u,e){const a=e["emit"];var t=_xeUtils.default.uniqueId();const i=(0,_vue.ref)(),o={refElem:i},c=(0,_vue.reactive)({activeIndex:u.modelValue||0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}),r=(0,_vue.computed)(()=>u.urlField||"url"),_=(0,_vue.computed)(()=>_xeUtils.default.toNumber(u.marginSize||0)||16),s=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().imagePreview.toolbarConfig,u.toolbarConfig)),l=(0,_vue.computed)(()=>{var e=c["offsetRotate"];return e?e+"°":"0°"}),v=(0,_vue.computed)(()=>{var e=c["offsetScale"];return e?_xeUtils.default.ceil(100*(1+e))+"%":"100%"}),d=(0,_vue.computed)(()=>{var e=u["urlList"];const t=r.value;return e&&e.length?e.map(e=>_xeUtils.default.isString(e)?e:e[t]||""):[]}),n=(0,_vue.computed)(()=>{var{offsetScale:e,offsetRotate:o,offsetLeft:a,offsetTop:i}=c,r=[];let n=1;if(e&&(n=1+e,r.push(`scale(${n})`)),o&&r.push(`rotate(${o}deg)`),a||i){let e=a/=n,t=i/=n;if(o)switch(o%360){case 90:case-270:e=i,t=-a;break;case 180:case-180:e=-a,t=-i;break;case 270:case-90:e=-i,t=a}r.push(`translate(${e}px, ${t}px)`)}return r.length?r.join(" "):""}),f={computeImgList:d},m={xID:t,props:u,context:e,reactData:c,getRefMaps:()=>o,getComputeMaps:()=>f},p=(e,t,o)=>{a(e,(0,_ui.createEvent)(o,{$imagePreview:m},t))};t={dispatchEvent:p};const g=e=>{c.activeIndex=e,a("update:modelValue",e)},E=e=>{p("close",{},e)};const h=()=>{var e=i.value;(0,_dom.removeClass)(e,"is--move"),Object.assign(c,{offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},w=()=>{var e=c["offsetScale"];let 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},x=e=>{var t=c["offsetScale"],o=w();c.offsetScale=e?Number(Math.min(49,t+o).toFixed(2)):Number(Math.max(-.9,t-o).toFixed(2))},I=(e,t)=>{let o=c.activeIndex||0;var a=d.value,t=(t?o>=a.length-1?o=0:o++:o<=0?o=a.length-1:o--,a[o||0]);c.activeIndex=o,h(),g(o),p("change",{url:t,activeIndex:o},e)},b=(e,t)=>{var o=d.value,a=c["activeIndex"],o=o[a||0];let i=c.offsetRotate;t?i+=90:i-=90,c.offsetRotate=i,p("rotate",{url:o,rotateValue:i},e)},P=()=>{var e=c["activeIndex"],e=d.value[e||0];_ui.VxeUI.print&&_ui.VxeUI.print({align:"center",pageBreaks:[{bodyHtml:`<img src="${e}" style="max-width:100%;max-height:100%;">`}]})},R=(e,t)=>{p("download",{url:t},e)},V=a=>{const i=c["activeIndex"];var e=s.value.download,e=!_xeUtils.default.isBoolean(e)&&e?Object.assign({},e):{};const r=d.value[i||0];var t=u.beforeDownloadMethod||e.beforeDownloadMethod||(0,_ui.getConfig)().imagePreview.beforeDownloadMethod;const n=u.downloadMethod||e.downloadMethod||(0,_ui.getConfig)().imagePreview.downloadMethod;Promise.resolve(!t||t({$imagePreview:m,url:r,index:i||0})).then(e=>{var t,o;e&&(n?Promise.resolve(n({$imagePreview:m,url:r,index:i||0})).then(()=>{R(a,r)}).catch(e=>e):(t=a,o=r,_ui.VxeUI.saveFile&&fetch(o).then(e=>e.blob().then(e=>{_ui.VxeUI.saveFile({filename:o,content:e}),R(t,o)})).catch(()=>{_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.downErr"),status:"error"})})))})},O=(e,t)=>{var o=c["activeIndex"];if(d.value[o||0])switch(t){case"zoomOut":x(!1);break;case"zoomIn":x(!0);break;case"pctFull":h();break;case"pct11":h(),c.offsetPct11=!0;break;case"rotateLeft":b(e,!1);break;case"rotateRight":b(e,!0);break;case"print":P();break;case"download":V(e)}},L=e=>{e=e.deltaY;0<e?x(!1):e<0&&x(!0)},C=e=>{const{offsetTop:r,offsetLeft:n}=c,u=i.value,t=(e.preventDefault(),document.onmousemove),o=document.onmouseup,s=e.pageX,l=e.pageY,v=_.value;document.onmousemove=e=>{var{pageX:t,pageY:o}=e,{visibleHeight:a,visibleWidth:i}=(0,_dom.getDomNode)();e.preventDefault(),(0,_dom.addClass)(u,"is--move"),t>v&&o>v&&t<i-v&&o<a-v&&(c.offsetLeft=n+t-s,c.offsetTop=r+o-l)},document.onmouseup=()=>{document.onmousemove=t,document.onmouseup=o,(0,_dom.removeClass)(u,"is--move")}},M=e=>{var t=(0,_dom.hasControlKey)(e),o=e.shiftKey,a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),n=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.R),s=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.P);a?(e.preventDefault(),o?--c.offsetTop:x(!0)):i?(e.preventDefault(),o?c.offsetTop+=1:x(!1)):r?(e.preventDefault(),o?--c.offsetLeft:I(e,!1)):n?(e.preventDefault(),o?c.offsetLeft+=1:I(e,!0)):u&&t?(e.preventDefault(),o?b(e,!1):b(e,!0)):s&&t&&(e.preventDefault(),P())},T=e=>{u.maskClosable&&e.target===e.currentTarget&&p("close",{},e)},y=(Object.assign(m,t,{}),(t,e)=>{var o=s.value[t],a=!_xeUtils.default.isBoolean(o)&&o?Object.assign({},o):{};return!1!==o?(0,_vue.h)("div",{class:"vxe-image-preview--operation-btn",title:(0,_ui.getI18n)("vxe.imagePreview.operBtn."+t),onClick(e){O(e,t)}},[(0,_vue.h)("i",{class:a.icon||(0,_ui.getIcon)()[e]})]):(0,_ui.renderEmptyElement)(m)});e=()=>{var e=c["offsetPct11"];return(0,_vue.h)("div",{ref:i,class:["vxe-image-preview",{"is--pct11":e}],onWheel:L},[(()=>{const o=c["activeIndex"];var e=d.value;const a=n.value;return(0,_vue.h)("div",{class:"vxe-image-preview--img-list",onClick:T},e.map((e,t)=>{t=o===t;return(0,_vue.h)("img",{class:["vxe-image-preview--img-item",{"is--active":t}],src:e,style:t?{transform:a}:null,onMousedown(e){C(e)}})}))})(),(()=>{var{showPrintButton:e,showDownloadButton:t}=u,o=c["activeIndex"],a=d.value,i=l.value,r=v.value,n=s.value;return(0,_vue.h)("div",{class:"vxe-image-preview--btn-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--close-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--close-btn",onClick:E},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_CLOSE})]),(0,_vue.h)("div",{class:"vxe-image-preview--close-bg"})]),1<a.length?(0,_vue.h)("div",{class:"vxe-image-preview--previous-btn",onClick(e){I(e,!1)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_ui.renderEmptyElement)(m),1<a.length?(0,_vue.h)("div",{class:"vxe-image-preview--next-btn",onClick(e){I(e,!0)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_ui.renderEmptyElement)(m),(0,_vue.h)("div",{class:"vxe-image-preview--operation-info"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-deg"},i),(0,_vue.h)("div",{class:"vxe-image-preview--operation-pct"},r)]),(0,_vue.h)("div",{class:"vxe-image-preview--operation-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-active-count"},[(0,_vue.h)("span",{class:"vxe-image-preview--operation-active-current"},""+((o||0)+1)),(0,_vue.h)("span",{class:"vxe-image-preview--operation-active-total"},"/"+a.length)]),y("zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),y("zoomIn","IMAGE_PREVIEW_ZOOM_IN"),y("pctFull","IMAGE_PREVIEW_PCT_FULL"),y("pct11","IMAGE_PREVIEW_PCT_1_1"),y("rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),y("rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),e||n.print?y("print","IMAGE_PREVIEW_PRINT"):(0,_ui.renderEmptyElement)(m),t||n.download?y("download","IMAGE_PREVIEW_DOWNLOAD"):(0,_ui.renderEmptyElement)(m)])])})()])};return(0,_vue.watch)(()=>u.modelValue,e=>{c.activeIndex=e,h()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(m,"keydown",M)}),(0,_vue.onBeforeUnmount)(()=>{var e=i.value;e&&(0,_dom.removeClass)(e,"is--move")}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(m,"keydown")}),(0,_vue.provide)("$xeImagePreview",m),m.renderVN=e}});

package/lib/image/src/util.js

@@ -18,6 +18,10 @@ const openPreviewImage = options => {
       urlList,
       activeIndex
     } = opts;
+    const {
+      rotate,
+      change
+    } = opts.events || {};
     const modalId = _xeUtils.default.uniqueId('image-preview');
     _core.VxeUI.modal.open({
       id: modalId,
@@ -44,6 +48,16 @@ const openPreviewImage = options => {
             downloadMethod: opts.downloadMethod,
             onClose() {
               _core.VxeUI.modal.close(modalId);
+            },
+            onChange(eventParams) {
+              if (change) {
+                change.call(this, eventParams);
+              }
+            },
+            onRotate(eventParams) {
+              if (rotate) {
+                rotate.call(this, eventParams);
+              }
             }
           });
         }

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

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

package/lib/index.umd.js

@@ -4278,14 +4278,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.7.8"}`;
+const log_version = `ui v${"4.7.9"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.7.8";
+const ui_version = "4.7.9";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -23042,7 +23042,7 @@ const IconPicker = VxeIconPicker;
     beforeDownloadMethod: Function,
     downloadMethod: Function
   },
-  emits: ['update:modelValue', 'change', 'download', 'download-fail', 'close'],
+  emits: ['update:modelValue', 'change', 'download', 'download-fail', 'rotate', 'close'],
   setup(props, context) {
     const {
       emit
@@ -23237,7 +23237,7 @@ const IconPicker = VxeIconPicker;
         reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
       }
     };
-    const handleChange = isNext => {
+    const handleChangeEvent = (evnt, isNext) => {
       let activeIndex = reactData.activeIndex || 0;
       const imgList = computeImgList.value;
       if (isNext) {
@@ -23253,11 +23253,21 @@ const IconPicker = VxeIconPicker;
           activeIndex--;
         }
       }
-      resetStyle();
+      const imgUrl = imgList[activeIndex || 0];
       reactData.activeIndex = activeIndex;
+      resetStyle();
       emitModel(activeIndex);
+      dispatchEvent('change', {
+        url: imgUrl,
+        activeIndex
+      }, evnt);
     };
-    const handleRotateImg = isRight => {
+    const handleRotateImgEvent = (evnt, isRight) => {
+      const imgList = computeImgList.value;
+      const {
+        activeIndex
+      } = reactData;
+      const imgUrl = imgList[activeIndex || 0];
       let offsetRotate = reactData.offsetRotate;
       if (isRight) {
         offsetRotate += 90;
@@ -23265,6 +23275,10 @@ const IconPicker = VxeIconPicker;
         offsetRotate -= 90;
       }
       reactData.offsetRotate = offsetRotate;
+      dispatchEvent('rotate', {
+        url: imgUrl,
+        rotateValue: offsetRotate
+      }, evnt);
     };
     const handlePct11 = () => {
       resetStyle();
@@ -23362,10 +23376,10 @@ const IconPicker = VxeIconPicker;
             handlePct11();
             break;
           case 'rotateLeft':
-            handleRotateImg(false);
+            handleRotateImgEvent(evnt, false);
             break;
           case 'rotateRight':
-            handleRotateImg(true);
+            handleRotateImgEvent(evnt, true);
             break;
           case 'print':
             handlePrintImg();
@@ -23447,21 +23461,21 @@ const IconPicker = VxeIconPicker;
         if (hasShiftKey) {
           reactData.offsetLeft -= 1;
         } else {
-          handleChange(false);
+          handleChangeEvent(evnt, false);
         }
       } else if (isRightArrow) {
         evnt.preventDefault();
         if (hasShiftKey) {
           reactData.offsetLeft += 1;
         } else {
-          handleChange(true);
+          handleChangeEvent(evnt, true);
         }
       } else if (isR && isControlKey) {
         evnt.preventDefault();
         if (hasShiftKey) {
-          handleRotateImg(false);
+          handleRotateImgEvent(evnt, false);
         } else {
-          handleRotateImg(true);
+          handleRotateImgEvent(evnt, true);
         }
       } else if (isP && isControlKey) {
         evnt.preventDefault();
@@ -23541,15 +23555,15 @@ const IconPicker = VxeIconPicker;
         class: 'vxe-image-preview--close-bg'
       })]), imgList.length > 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-image-preview--previous-btn',
-        onClick() {
-          handleChange(false);
+        onClick(evnt) {
+          handleChangeEvent(evnt, false);
         }
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: getIcon().IMAGE_PREVIEW_PREVIOUS
       })]) : renderEmptyElement($xeImagePreview), imgList.length > 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-image-preview--next-btn',
-        onClick() {
-          handleChange(true);
+        onClick(evnt) {
+          handleChangeEvent(evnt, true);
         }
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: getIcon().IMAGE_PREVIEW_NEXT
@@ -23616,6 +23630,10 @@ const openPreviewImage = options => {
       urlList,
       activeIndex
     } = opts;
+    const {
+      rotate,
+      change
+    } = opts.events || {};
     const modalId = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('image-preview');
     index_esm_VxeUI.modal.open({
       id: modalId,
@@ -23642,6 +23660,16 @@ const openPreviewImage = options => {
             downloadMethod: opts.downloadMethod,
             onClose() {
               index_esm_VxeUI.modal.close(modalId);
+            },
+            onChange(eventParams) {
+              if (change) {
+                change.call(this, eventParams);
+              }
+            },
+            onRotate(eventParams) {
+              if (rotate) {
+                rotate.call(this, eventParams);
+              }
             }
           });
         }
@@ -23687,9 +23715,10 @@ const openPreviewImage = options => {
     size: {
       type: String,
       default: () => getConfig().image.size || getConfig().size
-    }
+    },
+    getThumbnailUrlMethod: Function
   },
-  emits: ['click'],
+  emits: ['click', 'change', 'rotate'],
   setup(props, context) {
     const {
       emit
@@ -23751,6 +23780,14 @@ const openPreviewImage = options => {
       const imgItem = computeImgItem.value;
       return imgItem ? `${imgItem.url || ''}` : '';
     });
+    const computeImgThumbnailUrl = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().image.getThumbnailUrlMethod;
+      const imgUrl = computeImgUrl.value;
+      return getThumbnailUrlFn ? getThumbnailUrlFn({
+        url: imgUrl,
+        $image: $xeImage
+      }) : '';
+    });
     const computeMaps = {
       computeSize
     };
@@ -23790,10 +23827,18 @@ const openPreviewImage = options => {
             toolbarConfig,
             showPrintButton,
             showDownloadButton,
-            maskClosable
+            maskClosable,
+            events: {
+              change(eventParams) {
+                $xeImage.dispatchEvent('click', eventParams, eventParams.$event);
+              },
+              rotate(eventParams) {
+                $xeImage.dispatchEvent('click', eventParams, eventParams.$event);
+              }
+            }
           });
         }
-        imageMethods.dispatchEvent('click', {
+        $xeImage.dispatchEvent('click', {
           url: imgUrl
         }, evnt);
       }
@@ -23808,6 +23853,7 @@ const openPreviewImage = options => {
       } = props;
       const imgStyle = computeImgStyle.value;
       const imgUrl = computeImgUrl.value;
+      const imgThumbnailUrl = computeImgThumbnailUrl.value;
       const vSize = computeSize.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('img', {
         ref: refElem,
@@ -23815,7 +23861,7 @@ const openPreviewImage = options => {
           [`size--${vSize}`]: vSize,
           'is--circle': circle
         }],
-        src: imgUrl,
+        src: imgThumbnailUrl || imgUrl,
         alt,
         loading,
         style: imgStyle,
@@ -23870,9 +23916,10 @@ const image_Image = VxeImage;
     showDownloadButton: {
       type: Boolean,
       default: () => getConfig().imageGroup.showDownloadButton
-    }
+    },
+    getThumbnailUrlMethod: Function
   },
-  emits: ['click'],
+  emits: ['click', 'change', 'rotate'],
   setup(props, context) {
     const {
       emit
@@ -23904,6 +23951,9 @@ const image_Image = VxeImage;
     const computeImgStyleOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().imageGroup.imageStyle, props.imageStyle);
     });
+    const computeGetThumbnailUrlMethod = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return props.getThumbnailUrlMethod || getConfig().imageGroup.getThumbnailUrlMethod;
+    });
     const computeMaps = {
       computeSize
     };
@@ -23938,10 +23988,18 @@ const image_Image = VxeImage;
             urlList: imgList,
             toolbarConfig,
             showPrintButton,
-            showDownloadButton
+            showDownloadButton,
+            events: {
+              change(eventParams) {
+                $xeImageGroup.dispatchEvent('click', eventParams, eventParams.$event);
+              },
+              rotate(eventParams) {
+                $xeImageGroup.dispatchEvent('click', eventParams, eventParams.$event);
+              }
+            }
           });
         }
-        imageGroupMethods.dispatchEvent('click', {
+        $xeImageGroup.dispatchEvent('click', {
           url,
           urlList: imgList
         }, evnt);
@@ -23952,6 +24010,7 @@ const image_Image = VxeImage;
       const imgList = computeImgList.value;
       const vSize = computeSize.value;
       const imgStyleOpts = computeImgStyleOpts.value;
+      const getThumbnailUrlMethod = computeGetThumbnailUrlMethod.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: ['vxe-image-group', {
           [`size--${vSize}`]: vSize
@@ -23962,7 +24021,8 @@ const image_Image = VxeImage;
           src: item.url,
           alt: item.alt,
           width: imgStyleOpts.width,
-          height: imgStyleOpts.height
+          height: imgStyleOpts.height,
+          getThumbnailUrlMethod
         });
       }) : []);
     };