vxe-pc-ui 1.8.13 → 1.9.0

package/lib/image/src/preview.js

@@ -7,13 +7,21 @@ exports.default = void 0;
 var _vue = require("vue");
 var _core = require("@vxe-ui/core");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _dom = require("../..//ui/src/dom");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'VxeImagePreview',
   props: {
     modelValue: Number,
-    url: String,
-    urlList: Array
+    urlList: Array,
+    urlField: {
+      type: String,
+      default: () => (0, _core.getConfig)().imagePreview.urlField
+    },
+    marginSize: {
+      type: String,
+      default: () => (0, _core.getConfig)().imagePreview.marginSize
+    }
   },
   emits: ['update:modelValue', 'change', 'close'],
   setup(props, context) {
@@ -22,38 +30,83 @@ var _default = exports.default = (0, _vue.defineComponent)({
     } = context;
     const xID = _xeUtils.default.uniqueId();
     const reactData = (0, _vue.reactive)({
-      activeIndex: props.modelValue,
+      activeIndex: props.modelValue || 0,
+      targetHeight: 0,
+      targetWidth: 0,
       offsetPct11: false,
       offsetScale: 0,
       offsetRotate: 0,
       offsetLeft: 0,
       offsetTop: 0
     });
+    const computeUrlProp = (0, _vue.computed)(() => {
+      return props.urlField || 'url';
+    });
+    const computeMarginSize = (0, _vue.computed)(() => {
+      return _xeUtils.default.toNumber(props.marginSize || 0) || 16;
+    });
     const computeImgList = (0, _vue.computed)(() => {
       const {
-        url,
         urlList
       } = props;
-      let list = [];
+      const urlProp = computeUrlProp.value;
       if (urlList && urlList.length) {
-        list = urlList;
-      } else if (url) {
-        list = [url];
+        return urlList.map(item => {
+          if (_xeUtils.default.isString(item)) {
+            return item;
+          }
+          if (item[urlProp]) {
+            return item[urlProp];
+          }
+          return '';
+        });
       }
-      return list;
+      return [];
     });
     const computeImgTransform = (0, _vue.computed)(() => {
-      const {
+      let {
         offsetScale,
-        offsetRotate
+        offsetRotate,
+        offsetLeft,
+        offsetTop
       } = reactData;
       const stys = [];
-      if (offsetScale) {
-        stys.push(`scale(${1 + offsetScale})`);
+      let targetScale = 1;
+      if (targetScale) {
+        targetScale = 1 + offsetScale;
+        stys.push(`scale(${targetScale})`);
       }
       if (offsetRotate) {
         stys.push(`rotate(${offsetRotate}deg)`);
       }
+      if (offsetLeft || offsetTop) {
+        // 缩放与位移
+        offsetLeft /= targetScale;
+        offsetTop /= targetScale;
+        let targetOffsetLeft = offsetLeft;
+        let targetOffsetTop = offsetTop;
+        if (offsetRotate) {
+          // 转向与位移
+          switch (offsetRotate % 360) {
+            case 90:
+            case -270:
+              targetOffsetLeft = offsetTop;
+              targetOffsetTop = -offsetLeft;
+              break;
+            case 180:
+            case -180:
+              targetOffsetLeft = -offsetLeft;
+              targetOffsetTop = -offsetTop;
+              break;
+            case 270:
+            case -90:
+              targetOffsetLeft = -offsetTop;
+              targetOffsetTop = offsetLeft;
+              break;
+          }
+        }
+        stys.push(`translate(${targetOffsetLeft}px, ${targetOffsetTop}px)`);
+      }
       return stys.length ? stys.join(' ') : '';
     });
     const computeMaps = {
@@ -82,20 +135,47 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const imagePreviewPrivateMethods = {};
     const resetStyle = () => {
-      reactData.offsetPct11 = false;
-      reactData.offsetScale = 0;
-      reactData.offsetRotate = 0;
-      reactData.offsetTop = 0;
-      reactData.offsetLeft = 0;
+      Object.assign(reactData, {
+        targetHeight: 0,
+        targetWidth: 0,
+        offsetPct11: false,
+        offsetScale: 0,
+        offsetRotate: 0,
+        offsetLeft: 0,
+        offsetTop: 0
+      });
     };
     const handleZoom = isAdd => {
       const {
         offsetScale
       } = reactData;
+      let stepNum = 0.02;
+      console.log(offsetScale);
+      if (offsetScale >= -0.6) {
+        stepNum = 0.04;
+        if (offsetScale >= -0.4) {
+          stepNum = 0.07;
+          if (offsetScale >= 0) {
+            stepNum = 0.1;
+            if (offsetScale >= 3) {
+              stepNum = 0.2;
+              if (offsetScale >= 8) {
+                stepNum = 0.3;
+                if (offsetScale >= 18) {
+                  stepNum = 0.4;
+                  if (offsetScale >= 38) {
+                    stepNum = 0.5;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
       if (isAdd) {
-        reactData.offsetScale = Number(Math.min(10, offsetScale + 0.1).toFixed(2));
+        reactData.offsetScale = Number(Math.min(50, offsetScale + stepNum).toFixed(2));
       } else {
-        reactData.offsetScale = Number(Math.max(-0.6, offsetScale - 0.1).toFixed(2));
+        reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
       }
     };
     const handleChange = isNext => {
@@ -114,6 +194,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           activeIndex--;
         }
       }
+      resetStyle();
       reactData.activeIndex = activeIndex;
       emitModel(activeIndex);
     };
@@ -127,6 +208,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       reactData.offsetRotate = offsetRotate;
     };
     const handlePct11 = () => {
+      resetStyle();
       reactData.offsetPct11 = true;
     };
     const handlePrintImg = () => {
@@ -174,13 +256,94 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
       }
     };
+    const wheelEvent = evnt => {
+      const delta = evnt.deltaY;
+      if (delta > 0) {
+        handleZoom(false);
+      } else if (delta < 0) {
+        handleZoom(true);
+      }
+    };
+    const moveEvent = evnt => {
+      const {
+        offsetTop,
+        offsetLeft
+      } = reactData;
+      evnt.preventDefault();
+      const domMousemove = document.onmousemove;
+      const domMouseup = document.onmouseup;
+      const startX = evnt.pageX;
+      const startY = evnt.pageY;
+      const marginSize = computeMarginSize.value;
+      document.onmousemove = et => {
+        const {
+          pageX,
+          pageY
+        } = et;
+        const {
+          visibleHeight,
+          visibleWidth
+        } = (0, _dom.getDomNode)();
+        et.preventDefault();
+        console.log(et.pageX);
+        // 限制边界值
+        if (pageX > marginSize && pageY > marginSize && pageX < visibleWidth - marginSize && pageY < visibleHeight - marginSize) {
+          reactData.offsetLeft = offsetLeft + pageX - startX;
+          reactData.offsetTop = offsetTop + pageY - startY;
+        }
+      };
+      document.onmouseup = () => {
+        document.onmousemove = domMousemove;
+        document.onmouseup = domMouseup;
+      };
+    };
     const handleGlobalKeydownEvent = evnt => {
+      const hasCtrlKey = evnt.ctrlKey;
+      const hasShiftKey = evnt.shiftKey;
+      const isUpArrow = _core.globalEvents.hasKey(evnt, _core.GLOBAL_EVENT_KEYS.ARROW_UP);
+      const isDownArrow = _core.globalEvents.hasKey(evnt, _core.GLOBAL_EVENT_KEYS.ARROW_DOWN);
       const isLeftArrow = _core.globalEvents.hasKey(evnt, _core.GLOBAL_EVENT_KEYS.ARROW_LEFT);
       const isRightArrow = _core.globalEvents.hasKey(evnt, _core.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-      if (isLeftArrow) {
-        handleChange(false);
+      const isR = _core.globalEvents.hasKey(evnt, _core.GLOBAL_EVENT_KEYS.R);
+      const isP = _core.globalEvents.hasKey(evnt, _core.GLOBAL_EVENT_KEYS.P);
+      if (isUpArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetTop -= 1;
+        } else {
+          handleZoom(true);
+        }
+      } else if (isDownArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetTop += 1;
+        } else {
+          handleZoom(false);
+        }
+      } else if (isLeftArrow) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetLeft -= 1;
+        } else {
+          handleChange(false);
+        }
       } else if (isRightArrow) {
-        handleChange(true);
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          reactData.offsetLeft += 1;
+        } else {
+          handleChange(true);
+        }
+      } else if (isR && hasCtrlKey) {
+        evnt.preventDefault();
+        if (hasShiftKey) {
+          handleRotateImg(false);
+        } else {
+          handleRotateImg(true);
+        }
+      } else if (isP && hasCtrlKey) {
+        evnt.preventDefault();
+        handlePrintImg();
       }
     };
     Object.assign($xeImagePreview, imagePreviewMethods, imagePreviewPrivateMethods);
@@ -201,7 +364,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
           src: url,
           style: isActive ? {
             transform: imgTransform
-          } : null
+          } : null,
+          onMousedown(evnt) {
+            moveEvent(evnt);
+          }
         });
       }));
     };
@@ -231,21 +397,21 @@ var _default = exports.default = (0, _vue.defineComponent)({
         class: (0, _core.getIcon)().IMAGE_PREVIEW_CLOSE
       })]), (0, _vue.h)('div', {
         class: 'vxe-image-preview--close-bg'
-      })]), (0, _vue.h)('div', {
+      })]), imgList.length > 1 ? (0, _vue.h)('div', {
         class: 'vxe-image-preview--previous-btn',
         onClick() {
           handleChange(false);
         }
       }, [(0, _vue.h)('i', {
         class: (0, _core.getIcon)().IMAGE_PREVIEW_PREVIOUS
-      })]), (0, _vue.h)('div', {
+      })]) : (0, _vue.createCommentVNode)(), imgList.length > 1 ? (0, _vue.h)('div', {
         class: 'vxe-image-preview--next-btn',
         onClick() {
           handleChange(true);
         }
       }, [(0, _vue.h)('i', {
         class: (0, _core.getIcon)().IMAGE_PREVIEW_NEXT
-      })]), (0, _vue.h)('div', {
+      })]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
         class: 'vxe-image-preview--operation-wrapper'
       }, [(0, _vue.h)('div', {
         class: 'vxe-image-preview--operation-active-count'
@@ -258,7 +424,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       return (0, _vue.h)('div', {
         class: ['vxe-image-preview', {
           'is--pct11': offsetPct11
-        }]
+        }],
+        onWheel: wheelEvent
       }, [renderImgWrapper(), renderBtnWrapper()]);
     };
     $xeImagePreview.renderVN = renderVN;

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"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeImagePreview",props:{modelValue:Number,url:String,urlList:Array},emits:["update:modelValue","change","close"],setup(o,e){const r=e["emit"];var t=_xeUtils.default.uniqueId();const i=(0,_vue.reactive)({activeIndex:o.modelValue,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}),s=(0,_vue.computed)(()=>{var{url:e,urlList:t}=o;let a=[];return t&&t.length?a=t:e&&(a=[e]),a}),c=(0,_vue.computed)(()=>{var{offsetScale:e,offsetRotate:t}=i,a=[];return e&&a.push(`scale(${1+e})`),t&&a.push(`rotate(${t}deg)`),a.length?a.join(" "):""}),a={computeImgList:s},v={xID:t,props:o,context:e,reactData:i,getComputeMaps:()=>a},l={dispatchEvent(e,t,a){r(e,(0,_core.createEvent)(a,{$imagePreview:v},t))}},n=e=>{i.activeIndex=e,r("update:modelValue",e)},u=e=>{l.dispatchEvent("close",{},e)};const _=()=>{i.offsetPct11=!1,i.offsetScale=0,i.offsetRotate=0,i.offsetTop=0,i.offsetLeft=0},p=e=>{var t=i["offsetScale"];i.offsetScale=e?Number(Math.min(10,t+.1).toFixed(2)):Number(Math.max(-.6,t-.1).toFixed(2))},d=e=>{let t=i.activeIndex||0;var a=s.value;e?t>=a.length-1?t=0:t++:t<=0?t=a.length-1:t--,i.activeIndex=t,n(t)},f=e=>{let t=i.offsetRotate;e?t+=90:t-=90,i.offsetRotate=t},m=e=>{var t,a=i["activeIndex"];if(s.value[a||0])switch(e){case"zoomOut":p(!1);break;case"zoomIn":p(!0);break;case"pctFull":_();break;case"pct11":i.offsetPct11=!0;break;case"rotateLeft":f(!1);break;case"rotateRight":f(!0);break;case"print":t=i.activeIndex,t=s.value[t||0],_core.VxeUI.print&&_core.VxeUI.print({customStyle:"@page {size: auto;margin: 0mm;}html,body{height:100%;}body{display: flex;flex-direction: row;align-items: center;justify-content: center;}",content:`<img src="${t}" style="display: block;max-width:90%;max-height:90%;">`})}},E=e=>{var t=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.ARROW_LEFT),e=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.ARROW_RIGHT);t?d(!1):e&&d(!0)},I=(Object.assign(v,l,{}),(e,t)=>(0,_vue.h)("div",{class:"vxe-image-preview--operation-btn",onClick(){m(e)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)()[t]})]));t=()=>{var e,t=i["offsetPct11"];return(0,_vue.h)("div",{class:["vxe-image-preview",{"is--pct11":t}]},[(()=>{const a=i["activeIndex"];var e=s.value;const o=c.value;return(0,_vue.h)("div",{class:"vxe-image-preview--img-list"},e.map((e,t)=>{t=a===t;return(0,_vue.h)("img",{class:["vxe-image-preview--img-item",{"is--active":t}],src:e,style:t?{transform:o}:null})}))})(),(t=i.activeIndex,e=s.value,(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:u},[(0,_vue.h)("i",{class:(0,_core.getIcon)().IMAGE_PREVIEW_CLOSE})]),(0,_vue.h)("div",{class:"vxe-image-preview--close-bg"})]),(0,_vue.h)("div",{class:"vxe-image-preview--previous-btn",onClick(){d(!1)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)().IMAGE_PREVIEW_PREVIOUS})]),(0,_vue.h)("div",{class:"vxe-image-preview--next-btn",onClick(){d(!0)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)().IMAGE_PREVIEW_NEXT})]),(0,_vue.h)("div",{class:"vxe-image-preview--operation-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-active-count"},(t||0)+1+"/"+e.length),I("zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),I("zoomIn","IMAGE_PREVIEW_ZOOM_IN"),I("pctFull","IMAGE_PREVIEW_PCT_FULL"),I("pct11","IMAGE_PREVIEW_PCT_1_1"),I("rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),I("rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),I("print","IMAGE_PREVIEW_PRINT")])]))])};return v.renderVN=t,(0,_vue.watch)(()=>o.modelValue,e=>{i.activeIndex=e,_()}),(0,_vue.onMounted)(()=>{_core.globalEvents.on(v,"keydown",E)}),(0,_vue.onUnmounted)(()=>{_core.globalEvents.off(v,"keydown")}),(0,_vue.provide)("$xeImagePreview",v),t}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_core=require("@vxe-ui/core"),_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,_vue.defineComponent)({name:"VxeImagePreview",props:{modelValue:Number,urlList:Array,urlField:{type:String,default:()=>(0,_core.getConfig)().imagePreview.urlField},marginSize:{type:String,default:()=>(0,_core.getConfig)().imagePreview.marginSize}},emits:["update:modelValue","change","close"],setup(o,e){const a=e["emit"];var t=_xeUtils.default.uniqueId();const u=(0,_vue.reactive)({activeIndex:o.modelValue||0,targetHeight:0,targetWidth:0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}),r=(0,_vue.computed)(()=>o.urlField||"url"),v=(0,_vue.computed)(()=>_xeUtils.default.toNumber(o.marginSize||0)||16),s=(0,_vue.computed)(()=>{var e=o["urlList"];const t=r.value;return e&&e.length?e.map(e=>_xeUtils.default.isString(e)?e:e[t]||""):[]}),i=(0,_vue.computed)(()=>{var{offsetScale:e,offsetRotate:o,offsetLeft:a,offsetTop:r}=u,s=[];let i=1;if(i&&(i=1+e,s.push(`scale(${i})`)),o&&s.push(`rotate(${o}deg)`),a||r){let e=a/=i,t=r/=i;if(o)switch(o%360){case 90:case-270:e=r,t=-a;break;case 180:case-180:e=-a,t=-r;break;case 270:case-90:e=-r,t=a}s.push(`translate(${e}px, ${t}px)`)}return s.length?s.join(" "):""}),c={computeImgList:s},l={xID:t,props:o,context:e,reactData:u,getComputeMaps:()=>c},n={dispatchEvent(e,t,o){a(e,(0,_core.createEvent)(o,{$imagePreview:l},t))}},_=e=>{u.activeIndex=e,a("update:modelValue",e)},f=e=>{n.dispatchEvent("close",{},e)};const p=()=>{Object.assign(u,{targetHeight:0,targetWidth:0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},m=e=>{var t=u["offsetScale"];let o=.02;console.log(t),-.6<=t&&(o=.04,-.4<=t)&&(o=.07,0<=t)&&(o=.1,3<=t)&&(o=.2,8<=t)&&(o=.3,18<=t)&&(o=.4,38<=t)&&(o=.5),u.offsetScale=e?Number(Math.min(50,t+o).toFixed(2)):Number(Math.max(-.9,t-o).toFixed(2))},d=e=>{let t=u.activeIndex||0;var o=s.value;e?t>=o.length-1?t=0:t++:t<=0?t=o.length-1:t--,p(),u.activeIndex=t,_(t)},g=e=>{let t=u.offsetRotate;e?t+=90:t-=90,u.offsetRotate=t},E=()=>{var e=u["activeIndex"],e=s.value[e||0];_core.VxeUI.print&&_core.VxeUI.print({customStyle:"@page {size: auto;margin: 0mm;}html,body{height:100%;}body{display: flex;flex-direction: row;align-items: center;justify-content: center;}",content:`<img src="${e}" style="display: block;max-width:90%;max-height:90%;">`})},h=e=>{var t=u["activeIndex"];if(s.value[t||0])switch(e){case"zoomOut":m(!1);break;case"zoomIn":m(!0);break;case"pctFull":p();break;case"pct11":p(),u.offsetPct11=!0;break;case"rotateLeft":g(!1);break;case"rotateRight":g(!0);break;case"print":E()}},I=e=>{e=e.deltaY;0<e?m(!1):e<0&&m(!0)},x=e=>{const{offsetTop:s,offsetLeft:i}=u,t=(e.preventDefault(),document.onmousemove),o=document.onmouseup,c=e.pageX,l=e.pageY,n=v.value;document.onmousemove=e=>{var{pageX:t,pageY:o}=e,{visibleHeight:a,visibleWidth:r}=(0,_dom.getDomNode)();e.preventDefault(),console.log(e.pageX),t>n&&o>n&&t<r-n&&o<a-n&&(u.offsetLeft=i+t-c,u.offsetTop=s+o-l)},document.onmouseup=()=>{document.onmousemove=t,document.onmouseup=o}},b=e=>{var t=e.ctrlKey,o=e.shiftKey,a=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.ARROW_UP),r=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.ARROW_DOWN),s=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.ARROW_LEFT),i=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.ARROW_RIGHT),c=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.R),l=_core.globalEvents.hasKey(e,_core.GLOBAL_EVENT_KEYS.P);a?(e.preventDefault(),o?--u.offsetTop:m(!0)):r?(e.preventDefault(),o?u.offsetTop+=1:m(!1)):s?(e.preventDefault(),o?--u.offsetLeft:d(!1)):i?(e.preventDefault(),o?u.offsetLeft+=1:d(!0)):c&&t?(e.preventDefault(),o?g(!1):g(!0)):l&&t&&(e.preventDefault(),E())},R=(Object.assign(l,n,{}),(e,t)=>(0,_vue.h)("div",{class:"vxe-image-preview--operation-btn",onClick(){h(e)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)()[t]})]));t=()=>{var e,t=u["offsetPct11"];return(0,_vue.h)("div",{class:["vxe-image-preview",{"is--pct11":t}],onWheel:I},[(()=>{const o=u["activeIndex"];var e=s.value;const a=i.value;return(0,_vue.h)("div",{class:"vxe-image-preview--img-list"},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){x(e)}})}))})(),(t=u.activeIndex,e=s.value,(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:f},[(0,_vue.h)("i",{class:(0,_core.getIcon)().IMAGE_PREVIEW_CLOSE})]),(0,_vue.h)("div",{class:"vxe-image-preview--close-bg"})]),1<e.length?(0,_vue.h)("div",{class:"vxe-image-preview--previous-btn",onClick(){d(!1)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_vue.createCommentVNode)(),1<e.length?(0,_vue.h)("div",{class:"vxe-image-preview--next-btn",onClick(){d(!0)}},[(0,_vue.h)("i",{class:(0,_core.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-image-preview--operation-wrapper"},[(0,_vue.h)("div",{class:"vxe-image-preview--operation-active-count"},(t||0)+1+"/"+e.length),R("zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),R("zoomIn","IMAGE_PREVIEW_ZOOM_IN"),R("pctFull","IMAGE_PREVIEW_PCT_FULL"),R("pct11","IMAGE_PREVIEW_PCT_1_1"),R("rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),R("rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),R("print","IMAGE_PREVIEW_PRINT")])]))])};return l.renderVN=t,(0,_vue.watch)(()=>o.modelValue,e=>{u.activeIndex=e,p()}),(0,_vue.onMounted)(()=>{_core.globalEvents.on(l,"keydown",b)}),(0,_vue.onUnmounted)(()=>{_core.globalEvents.off(l,"keydown")}),(0,_vue.provide)("$xeImagePreview",l),t}});

package/lib/image/src/util.js

@@ -13,7 +13,6 @@ const openPreviewImage = options => {
   if (_core.VxeUI.modal) {
     const opts = Object.assign({}, options);
     const {
-      url,
       urlList,
       activeIndex
     } = opts;
@@ -32,7 +31,6 @@ const openPreviewImage = options => {
           return (0, _vue.h)(_preview.default, {
             modelValue: activeIndex,
             urlList,
-            url,
             onClose() {
               _core.VxeUI.modal.close(modalId);
             }

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{url:r,urlList:i,activeIndex:o}=Object.assign({},e),t=_xeUtils.default.uniqueId("image-preview");_core.VxeUI.modal.open({id:t,title:"预览",width:"100%",height:"100%",showHeader:!1,showFooter:!1,escClosable:!0,className:"vxe-image-preview-popup-wrapper",slots:{default(){return(0,_vue.h)(_preview.default,{modelValue:o,urlList:i,url:r,onClose(){_core.VxeUI.modal.close(t)}})}}})}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{urlList:r,activeIndex:i}=Object.assign({},e),o=_xeUtils.default.uniqueId("image-preview");_core.VxeUI.modal.open({id:o,title:"预览",width:"100%",height:"100%",showHeader:!1,showFooter:!1,escClosable:!0,className:"vxe-image-preview-popup-wrapper",slots:{default(){return(0,_vue.h)(_preview.default,{modelValue:i,urlList:r,onClose(){_core.VxeUI.modal.close(o)}})}}})}return Promise.resolve()};exports.openPreviewImage=openPreviewImage;

package/lib/image-preview/style/style.css

@@ -21,7 +21,6 @@
 .vxe-image-preview--img-item {
   display: none;
   cursor: grabbing;
-  transition: transform 0.3s ease-in-out;
 }
 .vxe-image-preview--img-item.is--active {
   display: block;
@@ -80,7 +79,7 @@
   justify-content: center;
   top: 50%;
   border-radius: 50%;
-  font-size: 2em;
+  font-size: 1.6em;
   padding: 0.5em;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.8);
@@ -120,12 +119,13 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
   font-size: 1.2em;
-  padding: 0 0.5em;
+  min-width: 2.5em;
 }
 
 .vxe-image-preview--operation-btn {
-  font-size: 2em;
+  font-size: 1.6em;
   padding: 0.5em;
   cursor: pointer;
   transition: all 0.1s ease-in-out;
@@ -144,7 +144,9 @@
           user-select: none;
 }
 .vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box {
+  border: 0;
   background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
 }
 .vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content {
   padding: 0;

package/lib/image-preview/style/style.min.css

@@ -1 +1 @@
-.vxe-image-preview{position:relative;width:100%;height:100%;overflow:hidden}.vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item{max-width:100%;max-height:100%}.vxe-image-preview--img-list{display:flex;width:100%;height:100%;flex-direction:row;align-items:center;justify-content:center}.vxe-image-preview--img-item{display:none;cursor:grabbing;transition:transform .3s ease-in-out}.vxe-image-preview--img-item.is--active{display:block}.vxe-image-preview--close-btn{top:0;right:0;z-index:99;padding:1em;font-size:1.5em;transform:scale(1);border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.vxe-image-preview--close-bg{position:absolute;top:-7em;right:-12em;z-index:99;width:30em;height:10em;background-color:rgba(0,0,0,.8);color:var(--vxe-ui-status-error-color);transform:rotate(45deg);cursor:pointer;z-index:88;transition:all .2s ease-in-out}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn{top:.2em;right:.2em;transform:scale(1.2);color:var(--vxe-ui-status-error-color)}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg{top:-5em}.vxe-image-preview--close-btn,.vxe-image-preview--next-btn,.vxe-image-preview--operation-wrapper,.vxe-image-preview--previous-btn{position:absolute;z-index:99}.vxe-image-preview--next-btn,.vxe-image-preview--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;top:50%;border-radius:50%;font-size:2em;padding:.5em;transform:translateY(-50%);background-color:rgba(0,0,0,.8);cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--next-btn:hover,.vxe-image-preview--previous-btn:hover{color:var(--vxe-ui-font-primary-color);transform:translateY(-50%) scale(1.2)}.vxe-image-preview--next-btn:active,.vxe-image-preview--previous-btn:active{transform:translateY(-50%) scale(1.1)}.vxe-image-preview--previous-btn{left:1vw}.vxe-image-preview--next-btn{right:1vw}.vxe-image-preview--operation-wrapper{display:flex;flex-direction:row;bottom:3vh;left:50%;transform:translateX(-50%);padding:0 1.5em;border-radius:3em;background-color:rgba(0,0,0,.8)}.vxe-image-preview--operation-active-count{display:flex;flex-direction:row;align-items:center;font-size:1.2em;padding:0 .5em}.vxe-image-preview--operation-btn{font-size:2em;padding:.5em;cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--operation-btn:hover{color:var(--vxe-ui-font-primary-color);transform:scale(1.2)}.vxe-image-preview--operation-btn:active{transform:scale(1.1)}.vxe-image-preview-popup-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box{background-color:rgba(0,0,0,.1)}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content{padding:0}
+.vxe-image-preview{position:relative;width:100%;height:100%;overflow:hidden}.vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item{max-width:100%;max-height:100%}.vxe-image-preview--img-list{display:flex;width:100%;height:100%;flex-direction:row;align-items:center;justify-content:center}.vxe-image-preview--img-item{display:none;cursor:grabbing}.vxe-image-preview--img-item.is--active{display:block}.vxe-image-preview--close-btn{top:0;right:0;z-index:99;padding:1em;font-size:1.5em;transform:scale(1);border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.vxe-image-preview--close-bg{position:absolute;top:-7em;right:-12em;z-index:99;width:30em;height:10em;background-color:rgba(0,0,0,.8);color:var(--vxe-ui-status-error-color);transform:rotate(45deg);cursor:pointer;z-index:88;transition:all .2s ease-in-out}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn{top:.2em;right:.2em;transform:scale(1.2);color:var(--vxe-ui-status-error-color)}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg{top:-5em}.vxe-image-preview--close-btn,.vxe-image-preview--next-btn,.vxe-image-preview--operation-wrapper,.vxe-image-preview--previous-btn{position:absolute;z-index:99}.vxe-image-preview--next-btn,.vxe-image-preview--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;top:50%;border-radius:50%;font-size:1.6em;padding:.5em;transform:translateY(-50%);background-color:rgba(0,0,0,.8);cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--next-btn:hover,.vxe-image-preview--previous-btn:hover{color:var(--vxe-ui-font-primary-color);transform:translateY(-50%) scale(1.2)}.vxe-image-preview--next-btn:active,.vxe-image-preview--previous-btn:active{transform:translateY(-50%) scale(1.1)}.vxe-image-preview--previous-btn{left:1vw}.vxe-image-preview--next-btn{right:1vw}.vxe-image-preview--operation-wrapper{display:flex;flex-direction:row;bottom:3vh;left:50%;transform:translateX(-50%);padding:0 1.5em;border-radius:3em;background-color:rgba(0,0,0,.8)}.vxe-image-preview--operation-active-count{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;min-width:2.5em}.vxe-image-preview--operation-btn{font-size:1.6em;padding:.5em;cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--operation-btn:hover{color:var(--vxe-ui-font-primary-color);transform:scale(1.2)}.vxe-image-preview--operation-btn:active{transform:scale(1.1)}.vxe-image-preview-popup-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box{border:0;background-color:rgba(0,0,0,.1);box-shadow:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content{padding:0}