vue-img-viewr - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

CHANGELOG.md

 # 更新日志
 
+#### 2.0.3 (2021-06-18)
+
+* add props types
+
 #### 2.0.2 (2021-06-17)
@@ -4,0 +8,0 @@

lib/vue-img-viewr.es.js

@@ -1,1 +0,1 @@
-var e=Object.defineProperty,n=Object.prototype.hasOwnProperty,l=Object.getOwnPropertySymbols,i=Object.prototype.propertyIsEnumerable,o=(n,l,i)=>l in n?e(n,l,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[l]=i,a=(e,a)=>{for(var t in a||(a={}))n.call(a,t)&&o(e,t,a[t]);if(l)for(var t of l(a))i.call(a,t)&&o(e,t,a[t]);return e};import{defineComponent as t,ref as s,reactive as r,computed as c,watchEffect as u,watch as d,nextTick as m,onMounted as v,onBeforeUnmount as g,openBlock as _,createBlock as w,Transition as f,withCtx as h,withDirectives as p,createVNode as k,withModifiers as b,Fragment as y,createCommentVNode as I,renderList as x,vShow as C,render as O}from"vue";const A="undefined"==typeof window,z=(e,n,l,i=!1)=>{!A&&e&&n&&l&&e.addEventListener(n,l,i)},S=(e,n,l,i=!1)=>{!A&&e&&n&&l&&e.removeEventListener(n,l,i)};function M(e){let n=!1;return function(...l){n||(n=!0,window.requestAnimationFrame((()=>{e.apply(this,l),n=!1})))}}const E={CONTAIN:{name:"contain",icon:"img-viewr__icon icon__full-screen"},ORIGINAL:{name:"original",icon:"img-viewr__icon icon__scale-to-original"}},N=!A&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",D="Escape",L="ArrowLeft",T="ArrowUp",R="ArrowRight",$="ArrowDown",F="Space";var X=t({props:{visible:{type:Boolean,default:!1},urls:{type:Array,default:()=>[]},zIndex:{type:Number,default:3e3},initialIndex:{type:Number,default:0},lockScroll:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!0}},emits:["close","switch"],setup(e,{emit:n}){const l=s(0),i=s(3e3),o=s(!0),t=s(!0),_=s(!1),w=s([]),f=s(null),h=s(null),p=s(0),k=s(!0),b=s(!1),y=r(a({},E.CONTAIN)),I=r({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),x=s(null),C=s(null),O=c((()=>w.value.length<=1)),A=c((()=>0===p.value)),X=c((()=>p.value===w.value.length-1)),Y=c((()=>w.value[p.value]||w.value[0])),j=c((()=>{const{scale:e,deg:n,offsetX:l,offsetY:i,enableTransition:o}=I,a={transform:`scale(${e}) rotate(${n}deg)`,transition:o?"transform .3s":"","margin-left":`${l}px`,"margin-top":`${i}px`};return y.name===E.CONTAIN.name&&(a.maxWidth=a.maxHeight="100%"),a}));u((()=>{e.urls.length&&(w.value=e.urls,l.value=e.initialIndex,i.value=e.zIndex,o.value=e.lockScroll,t.value=e.closeOnClickMask)})),d((()=>e.visible),(e=>{_.value=e})),d(l,(e=>{e!==p.value&&(p.value=e)})),d(_,(e=>{if(!o.value)return;let n=document.body.className;e?n.includes("img-viewr__body-lock")||(n+=" img-viewr__body-lock"):n=n.replace("img-viewr__body-lock",""),document.body.className=n.trim()})),d(p,(e=>{var l;W(),null==(l=h.value)||l.call(h,e),n("switch",e)})),d(Y,(()=>{m((()=>{const e=C.value;e&&e.complete||(b.value=!0)}))}));const H=()=>{var e;null==(e=f.value)||e.call(f),n("close")};let B,P,V;const W=()=>{I.scale=1,I.deg=0,I.offsetX=0,I.offsetY=0,I.enableTransition=!1},U=()=>{if(b.value)return;const e=Object.keys(E),n=(Object.values(E).findIndex((({name:e})=>e===y.name))+1)%e.length,{name:l,icon:i}=E[e[n]];y.name=l,y.icon=i,W()},q=()=>{if(A.value&&!k.value)return;const e=w.value.length;p.value=(p.value-1+e)%e},G=()=>{if(X.value&&!k.value)return;const e=w.value.length;p.value=(p.value+1)%e},J=(e,n={})=>{if(b.value)return;const{zoomRate:l,rotateDeg:i,enableTransition:o}=a({zoomRate:.2,rotateDeg:90,enableTransition:!0},n);switch(e){case"zoomOut":I.scale>.2&&(I.scale=parseFloat((I.scale-l).toFixed(3)));break;case"zoomIn":I.scale=parseFloat((I.scale+l).toFixed(3));break;case"clocelise":I.deg+=i;break;case"anticlocelise":I.deg-=i;break;case"download":((e,n,l)=>{const i=new Image,o=document.createElement("canvas"),a=o.getContext("2d"),t=document.createElement("a");i.setAttribute("crossOrigin","anonymous"),i.src=e,i.onerror=()=>{window.open(e)},i.onload=()=>{o.width=i.width,o.height=i.height,null==a||a.drawImage(i,0,0,i.width,i.height),t.setAttribute("href",o.toDataURL(`image/${l}`)),t.setAttribute("target","_blank"),t.setAttribute("download",`${n}.${l}`),t.click()}})(Y.value,Date.now().toString(),"png")}I.enableTransition=o};return v((()=>{var e,n;B=M((e=>{switch(e.code){case D:H();break;case F:U();break;case L:q();break;case T:J("zoomIn");break;case R:G();break;case $:J("zoomOut")}})),P=M((e=>{const n=e.wheelDelta?e.wheelDelta:-e.detail;J(n>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),z(document,"keydown",B),z(document,N,P),null==(n=null==(e=null==x?void 0:x.value)?void 0:e.focus)||n.call(e)})),g((()=>{B&&S(document,"keydown",B),P&&S(document,N,P),B=null,P=null})),{images:w,isShow:_,initIndex:l,zIndexNum:i,isLockScroll:o,isCloseOnClickMask:t,imgViewrWrapper:x,imageRef:C,index:p,isSingle:O,infinite:k,isFirst:A,isLast:X,mode:y,currentImg:Y,imgStyle:j,closeHandle:f,switchHandle:h,hide:H,prev:q,next:G,toggleMode:U,handleActions:J,handleMaskClick:()=>{t.value&&H()},handleImgLoad:()=>{b.value=!1},handleImgError:()=>{b.value=!1;const e=C.value;e&&(e.alt="加载失败")},handleMouseDown:e=>{if(b.value||0!==e.button)return;const{offsetX:n,offsetY:l}=I,i=e.pageX,o=e.pageY;V=M((e=>{I.offsetX=n+e.pageX-i,I.offsetY=l+e.pageY-o})),z(document,"mousemove",V),z(document,"mouseup",(()=>{V&&S(document,"mousemove",V)})),e.preventDefault()}}}});const Y=k("i",{class:"img-viewr__icon icon__circle-close"},null,-1),j=k("i",{class:"img-viewr__icon icon__arrow-left"},null,-1),H=k("i",{class:"img-viewr__icon icon__arrow-right"},null,-1),B={class:"img-viewr__btn img-viewr__actions"},P={class:"img-viewr__actions__inner"},V=k("i",{class:"img-viewr__actions__divider"},null,-1),W=k("i",{class:"img-viewr__actions__divider"},null,-1),U=k("i",{class:"img-viewr__actions__divider"},null,-1),q={class:"img-viewr__canvas"};X.render=function(e,n,l,i,o,a){return _(),w(f,{name:"img-viewr-fade"},{default:h((()=>[p(k("div",{tabindex:"-1",ref:"imgViewrWrapper",class:"img-viewr__wrapper",style:`z-index: ${e.zIndexNum}`},[k("div",{class:"img-viewr__mask",onClick:n[1]||(n[1]=b(((...n)=>e.handleMaskClick&&e.handleMaskClick(...n)),["self"]))}),k("span",{class:"img-viewr__btn img-viewr__close",onClick:n[2]||(n[2]=(...n)=>e.hide&&e.hide(...n))},[Y]),e.isSingle?I("",!0):(_(),w(y,{key:0},[k("span",{class:["img-viewr__btn img-viewr__prev",{"is-disabled":!e.infinite&&e.isFirst}],onClick:n[3]||(n[3]=(...n)=>e.prev&&e.prev(...n))},[j],2),k("span",{class:["img-viewr__btn img-viewr__next",{"is-disabled":!e.infinite&&e.isLast}],onClick:n[4]||(n[4]=(...n)=>e.next&&e.next(...n))},[H],2)],64)),k("div",B,[k("div",P,[k("i",{class:"img-viewr__icon icon__zoom-out",onClick:n[5]||(n[5]=n=>e.handleActions("zoomOut"))}),k("i",{class:"img-viewr__icon icon__zoom-in",onClick:n[6]||(n[6]=n=>e.handleActions("zoomIn"))}),V,k("i",{class:e.mode.icon,onClick:n[7]||(n[7]=(...n)=>e.toggleMode&&e.toggleMode(...n))},null,2),W,k("i",{class:"img-viewr__icon icon__download-image",onClick:n[8]||(n[8]=n=>e.handleActions("download"))}),U,k("i",{class:"img-viewr__icon icon__refresh-left",onClick:n[9]||(n[9]=n=>e.handleActions("anticlocelise"))}),k("i",{class:"img-viewr__icon icon__refresh-right",onClick:n[10]||(n[10]=n=>e.handleActions("clocelise"))})])]),k("div",q,[(_(!0),w(y,null,x(e.images,((l,i)=>(_(),w(y,null,[i===e.index?(_(),w("img",{class:"img-viewr__img",ref:"imageRef",key:l,src:e.currentImg,style:e.imgStyle,onLoad:n[11]||(n[11]=(...n)=>e.handleImgLoad&&e.handleImgLoad(...n)),onError:n[12]||(n[12]=(...n)=>e.handleImgError&&e.handleImgError(...n)),onMousedown:n[13]||(n[13]=(...n)=>e.handleMouseDown&&e.handleMouseDown(...n))},null,44,["src"])):I("",!0)],64)))),256))])],4),[[C,e.isShow]])])),_:1})};const G="undefined"==typeof window;let J;const K=e=>{var n,l,i,o,a;if(G)return;if(!(e.urls&&e.urls.length>0))throw new Error("At least one picture in urls array!");J||(()=>{const e=document.createElement("div"),n=k(X,{});n&&n.props&&(n.props.onDestroy=()=>{O(null,e)}),O(n,e),J=n,e.firstElementChild&&document.body.appendChild(e.firstElementChild)})();const t=null==(n=null==J?void 0:J.component)?void 0:n.proxy;t.images=e.urls,t.initIndex=null!=(l=e.index)?l:0,t.zIndexNum=null!=(i=e.zIndex)?i:3e3,t.isLockScroll=null==(o=e.lockScroll)||o,t.isCloseOnClickMask=null==(a=e.closeOnClickMask)||a,t.closeHandle=()=>{var n;t.isShow=!1,null==(n=e.onClose)||n.call(e)},t.switchHandle=n=>{var l;null==(l=e.onSwitch)||l.call(e,n)},setTimeout((()=>{t.isShow=!0}),0)};export default X;export{X as ImgViewr,K as showImages};
+var e=Object.defineProperty,n=Object.prototype.hasOwnProperty,l=Object.getOwnPropertySymbols,i=Object.prototype.propertyIsEnumerable,o=(n,l,i)=>l in n?e(n,l,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[l]=i,a=(e,a)=>{for(var t in a||(a={}))n.call(a,t)&&o(e,t,a[t]);if(l)for(var t of l(a))i.call(a,t)&&o(e,t,a[t]);return e};import{defineComponent as t,ref as s,reactive as r,computed as c,watchEffect as u,watch as d,nextTick as m,onMounted as v,onBeforeUnmount as g,openBlock as _,createBlock as w,Transition as f,withCtx as h,withDirectives as p,createVNode as k,withModifiers as b,Fragment as y,createCommentVNode as I,renderList as x,vShow as C,render as O}from"vue";const A="undefined"==typeof window,z=(e,n,l,i=!1)=>{!A&&e&&n&&l&&e.addEventListener(n,l,i)},S=(e,n,l,i=!1)=>{!A&&e&&n&&l&&e.removeEventListener(n,l,i)};function M(e){let n=!1;return function(...l){n||(n=!0,window.requestAnimationFrame((()=>{e.apply(this,l),n=!1})))}}const E={CONTAIN:{name:"contain",icon:"img-viewr__icon icon__full-screen"},ORIGINAL:{name:"original",icon:"img-viewr__icon icon__scale-to-original"}},N=!A&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",D="Escape",L="ArrowLeft",T="ArrowUp",R="ArrowRight",$="ArrowDown",F="Space";var X=t({name:"ImgViewr",props:{visible:{type:Boolean,default:!1},urls:{type:Array,default:()=>[]},zIndex:{type:Number,default:3e3},initialIndex:{type:Number,default:0},lockScroll:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!0}},emits:["close","switch"],setup(e,{emit:n}){const l=s(0),i=s(3e3),o=s(!0),t=s(!0),_=s(!1),w=s([]),f=s(null),h=s(null),p=s(0),k=s(!0),b=s(!1),y=r(a({},E.CONTAIN)),I=r({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),x=s(null),C=s(null),O=c((()=>w.value.length<=1)),A=c((()=>0===p.value)),X=c((()=>p.value===w.value.length-1)),Y=c((()=>w.value[p.value]||w.value[0])),j=c((()=>{const{scale:e,deg:n,offsetX:l,offsetY:i,enableTransition:o}=I,a={transform:`scale(${e}) rotate(${n}deg)`,transition:o?"transform .3s":"","margin-left":`${l}px`,"margin-top":`${i}px`};return y.name===E.CONTAIN.name&&(a.maxWidth=a.maxHeight="100%"),a}));u((()=>{e.urls.length&&(w.value=e.urls,l.value=e.initialIndex,i.value=e.zIndex,o.value=e.lockScroll,t.value=e.closeOnClickMask)})),d((()=>e.visible),(e=>{_.value=e})),d(l,(e=>{e!==p.value&&(p.value=e)})),d(_,(e=>{if(!o.value)return;let n=document.body.className;e?n.includes("img-viewr__body-lock")||(n+=" img-viewr__body-lock"):n=n.replace("img-viewr__body-lock",""),document.body.className=n.trim()})),d(p,(e=>{var l;W(),null==(l=h.value)||l.call(h,e),n("switch",e)})),d(Y,(()=>{m((()=>{const e=C.value;e&&e.complete||(b.value=!0)}))}));const H=()=>{var e;null==(e=f.value)||e.call(f),n("close")};let V,B,P;const W=()=>{I.scale=1,I.deg=0,I.offsetX=0,I.offsetY=0,I.enableTransition=!1},U=()=>{if(b.value)return;const e=Object.keys(E),n=(Object.values(E).findIndex((({name:e})=>e===y.name))+1)%e.length,{name:l,icon:i}=E[e[n]];y.name=l,y.icon=i,W()},q=()=>{if(A.value&&!k.value)return;const e=w.value.length;p.value=(p.value-1+e)%e},G=()=>{if(X.value&&!k.value)return;const e=w.value.length;p.value=(p.value+1)%e},J=(e,n={})=>{if(b.value)return;const{zoomRate:l,rotateDeg:i,enableTransition:o}=a({zoomRate:.2,rotateDeg:90,enableTransition:!0},n);switch(e){case"zoomOut":I.scale>.2&&(I.scale=parseFloat((I.scale-l).toFixed(3)));break;case"zoomIn":I.scale=parseFloat((I.scale+l).toFixed(3));break;case"clocelise":I.deg+=i;break;case"anticlocelise":I.deg-=i;break;case"download":((e,n,l)=>{const i=new Image,o=document.createElement("canvas"),a=o.getContext("2d"),t=document.createElement("a");i.setAttribute("crossOrigin","anonymous"),i.src=e,i.onerror=()=>{window.open(e)},i.onload=()=>{o.width=i.width,o.height=i.height,null==a||a.drawImage(i,0,0,i.width,i.height),t.setAttribute("href",o.toDataURL(`image/${l}`)),t.setAttribute("target","_blank"),t.setAttribute("download",`${n}.${l}`),t.click()}})(Y.value,Date.now().toString(),"png")}I.enableTransition=o};return v((()=>{var e,n;V=M((e=>{switch(e.code){case D:H();break;case F:U();break;case L:q();break;case T:J("zoomIn");break;case R:G();break;case $:J("zoomOut")}})),B=M((e=>{const n=e.wheelDelta?e.wheelDelta:-e.detail;J(n>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),z(document,"keydown",V),z(document,N,B),null==(n=null==(e=null==x?void 0:x.value)?void 0:e.focus)||n.call(e)})),g((()=>{V&&S(document,"keydown",V),B&&S(document,N,B),V=null,B=null})),{images:w,isShow:_,initIndex:l,zIndexNum:i,isLockScroll:o,isCloseOnClickMask:t,imgViewrWrapper:x,imageRef:C,index:p,isSingle:O,infinite:k,isFirst:A,isLast:X,mode:y,currentImg:Y,imgStyle:j,closeHandle:f,switchHandle:h,hide:H,prev:q,next:G,toggleMode:U,handleActions:J,handleMaskClick:()=>{t.value&&H()},handleImgLoad:()=>{b.value=!1},handleImgError:()=>{b.value=!1;const e=C.value;e&&(e.alt="加载失败")},handleMouseDown:e=>{if(b.value||0!==e.button)return;const{offsetX:n,offsetY:l}=I,i=e.pageX,o=e.pageY;P=M((e=>{I.offsetX=n+e.pageX-i,I.offsetY=l+e.pageY-o})),z(document,"mousemove",P),z(document,"mouseup",(()=>{P&&S(document,"mousemove",P)})),e.preventDefault()}}}});const Y=k("i",{class:"img-viewr__icon icon__circle-close"},null,-1),j=k("i",{class:"img-viewr__icon icon__arrow-left"},null,-1),H=k("i",{class:"img-viewr__icon icon__arrow-right"},null,-1),V={class:"img-viewr__btn img-viewr__actions"},B={class:"img-viewr__actions__inner"},P=k("i",{class:"img-viewr__actions__divider"},null,-1),W=k("i",{class:"img-viewr__actions__divider"},null,-1),U=k("i",{class:"img-viewr__actions__divider"},null,-1),q={class:"img-viewr__canvas"};X.render=function(e,n,l,i,o,a){return _(),w(f,{name:"img-viewr-fade"},{default:h((()=>[p(k("div",{tabindex:"-1",ref:"imgViewrWrapper",class:"img-viewr__wrapper",style:`z-index: ${e.zIndexNum}`},[k("div",{class:"img-viewr__mask",onClick:n[1]||(n[1]=b(((...n)=>e.handleMaskClick&&e.handleMaskClick(...n)),["self"]))}),k("span",{class:"img-viewr__btn img-viewr__close",onClick:n[2]||(n[2]=(...n)=>e.hide&&e.hide(...n))},[Y]),e.isSingle?I("",!0):(_(),w(y,{key:0},[k("span",{class:["img-viewr__btn img-viewr__prev",{"is-disabled":!e.infinite&&e.isFirst}],onClick:n[3]||(n[3]=(...n)=>e.prev&&e.prev(...n))},[j],2),k("span",{class:["img-viewr__btn img-viewr__next",{"is-disabled":!e.infinite&&e.isLast}],onClick:n[4]||(n[4]=(...n)=>e.next&&e.next(...n))},[H],2)],64)),k("div",V,[k("div",B,[k("i",{class:"img-viewr__icon icon__zoom-out",onClick:n[5]||(n[5]=n=>e.handleActions("zoomOut"))}),k("i",{class:"img-viewr__icon icon__zoom-in",onClick:n[6]||(n[6]=n=>e.handleActions("zoomIn"))}),P,k("i",{class:e.mode.icon,onClick:n[7]||(n[7]=(...n)=>e.toggleMode&&e.toggleMode(...n))},null,2),W,k("i",{class:"img-viewr__icon icon__download-image",onClick:n[8]||(n[8]=n=>e.handleActions("download"))}),U,k("i",{class:"img-viewr__icon icon__refresh-left",onClick:n[9]||(n[9]=n=>e.handleActions("anticlocelise"))}),k("i",{class:"img-viewr__icon icon__refresh-right",onClick:n[10]||(n[10]=n=>e.handleActions("clocelise"))})])]),k("div",q,[(_(!0),w(y,null,x(e.images,((l,i)=>(_(),w(y,null,[i===e.index?(_(),w("img",{class:"img-viewr__img",ref:"imageRef",key:l,src:e.currentImg,style:e.imgStyle,onLoad:n[11]||(n[11]=(...n)=>e.handleImgLoad&&e.handleImgLoad(...n)),onError:n[12]||(n[12]=(...n)=>e.handleImgError&&e.handleImgError(...n)),onMousedown:n[13]||(n[13]=(...n)=>e.handleMouseDown&&e.handleMouseDown(...n))},null,44,["src"])):I("",!0)],64)))),256))])],4),[[C,e.isShow]])])),_:1})};const G="undefined"==typeof window;let J;const K=e=>{var n,l,i,o,a;if(G)return;if(!(e.urls&&e.urls.length>0))throw new Error("At least one picture in urls array!");J||(()=>{const e=document.createElement("div"),n=k(X,{});n&&n.props&&(n.props.onDestroy=()=>{O(null,e)}),O(n,e),J=n,e.firstElementChild&&document.body.appendChild(e.firstElementChild)})();const t=null==(n=null==J?void 0:J.component)?void 0:n.proxy;t.images=e.urls,t.initIndex=null!=(l=e.index)?l:0,t.zIndexNum=null!=(i=e.zIndex)?i:3e3,t.isLockScroll=null==(o=e.lockScroll)||o,t.isCloseOnClickMask=null==(a=e.closeOnClickMask)||a,t.closeHandle=()=>{var n;t.isShow=!1,null==(n=e.onClose)||n.call(e)},t.switchHandle=n=>{var l;null==(l=e.onSwitch)||l.call(e,n)},setTimeout((()=>{t.isShow=!0}),0)};export default X;export{X as ImgViewr,K as showImages};

lib/vue-img-viewr.umd.js

@@ -1,1 +0,1 @@
-var __defProp=Object.defineProperty,__hasOwnProp=Object.prototype.hasOwnProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,o,n)=>o in e?__defProp(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,__assign=(e,o)=>{for(var n in o||(o={}))__hasOwnProp.call(o,n)&&__defNormalProp(e,n,o[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(o))__propIsEnum.call(o,n)&&__defNormalProp(e,n,o[n]);return e};!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["vue-img-viewr"]={},e.Vue)}(this,(function(e,o){"use strict";const n="undefined"==typeof window,i=(e,o,i,l=!1)=>{!n&&e&&o&&i&&e.addEventListener(o,i,l)},l=(e,o,i,l=!1)=>{!n&&e&&o&&i&&e.removeEventListener(o,i,l)};function t(e){let o=!1;return function(...n){o||(o=!0,window.requestAnimationFrame((()=>{e.apply(this,n),o=!1})))}}const a={CONTAIN:{name:"contain",icon:"img-viewr__icon icon__full-screen"},ORIGINAL:{name:"original",icon:"img-viewr__icon icon__scale-to-original"}},r=!n&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",c="close",s="switch",d="Escape",u="ArrowLeft",m="ArrowUp",_="ArrowRight",v="ArrowDown",g="Space";var f=o.defineComponent({props:{visible:{type:Boolean,default:!1},urls:{type:Array,default:()=>[]},zIndex:{type:Number,default:3e3},initialIndex:{type:Number,default:0},lockScroll:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!0}},emits:[c,s],setup(e,{emit:n}){const f=o.ref(0),w=o.ref(3e3),p=o.ref(!0),h=o.ref(!0),k=o.ref(!1),b=o.ref([]),y=o.ref(null),N=o.ref(null),I=o.ref(0),x=o.ref(!0),C=o.ref(!1),O=o.reactive(__assign({},a.CONTAIN)),V=o.reactive({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),S=o.ref(null),A=o.ref(null),M=o.computed((()=>b.value.length<=1)),z=o.computed((()=>0===I.value)),E=o.computed((()=>I.value===b.value.length-1)),T=o.computed((()=>b.value[I.value]||b.value[0])),B=o.computed((()=>{const{scale:e,deg:o,offsetX:n,offsetY:i,enableTransition:l}=V,t={transform:`scale(${e}) rotate(${o}deg)`,transition:l?"transform .3s":"","margin-left":`${n}px`,"margin-top":`${i}px`};return O.name===a.CONTAIN.name&&(t.maxWidth=t.maxHeight="100%"),t}));o.watchEffect((()=>{e.urls.length&&(b.value=e.urls,f.value=e.initialIndex,w.value=e.zIndex,p.value=e.lockScroll,h.value=e.closeOnClickMask)})),o.watch((()=>e.visible),(e=>{k.value=e})),o.watch(f,(e=>{e!==I.value&&(I.value=e)})),o.watch(k,(e=>{if(!p.value)return;let o=document.body.className;e?o.includes("img-viewr__body-lock")||(o+=" img-viewr__body-lock"):o=o.replace("img-viewr__body-lock",""),document.body.className=o.trim()})),o.watch(I,(e=>{var o;j(),null==(o=N.value)||o.call(N,e),n(s,e)})),o.watch(T,(()=>{o.nextTick((()=>{const e=A.value;e&&e.complete||(C.value=!0)}))}));const D=()=>{var e;null==(e=y.value)||e.call(y),n(c)};let L,P,F;const j=()=>{V.scale=1,V.deg=0,V.offsetX=0,V.offsetY=0,V.enableTransition=!1},R=()=>{if(C.value)return;const e=Object.keys(a),o=(Object.values(a).findIndex((({name:e})=>e===O.name))+1)%e.length,{name:n,icon:i}=a[e[o]];O.name=n,O.icon=i,j()},$=()=>{if(z.value&&!x.value)return;const e=b.value.length;I.value=(I.value-1+e)%e},X=()=>{if(E.value&&!x.value)return;const e=b.value.length;I.value=(I.value+1)%e},Y=(e,o={})=>{if(C.value)return;const{zoomRate:n,rotateDeg:i,enableTransition:l}=__assign({zoomRate:.2,rotateDeg:90,enableTransition:!0},o);switch(e){case"zoomOut":V.scale>.2&&(V.scale=parseFloat((V.scale-n).toFixed(3)));break;case"zoomIn":V.scale=parseFloat((V.scale+n).toFixed(3));break;case"clocelise":V.deg+=i;break;case"anticlocelise":V.deg-=i;break;case"download":((e,o,n)=>{const i=new Image,l=document.createElement("canvas"),t=l.getContext("2d"),a=document.createElement("a");i.setAttribute("crossOrigin","anonymous"),i.src=e,i.onerror=()=>{window.open(e)},i.onload=()=>{l.width=i.width,l.height=i.height,null==t||t.drawImage(i,0,0,i.width,i.height),a.setAttribute("href",l.toDataURL(`image/${n}`)),a.setAttribute("target","_blank"),a.setAttribute("download",`${o}.${n}`),a.click()}})(T.value,Date.now().toString(),"png")}V.enableTransition=l};return o.onMounted((()=>{var e,o;L=t((e=>{switch(e.code){case d:D();break;case g:R();break;case u:$();break;case m:Y("zoomIn");break;case _:X();break;case v:Y("zoomOut")}})),P=t((e=>{const o=e.wheelDelta?e.wheelDelta:-e.detail;Y(o>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),i(document,"keydown",L),i(document,r,P),null==(o=null==(e=null==S?void 0:S.value)?void 0:e.focus)||o.call(e)})),o.onBeforeUnmount((()=>{L&&l(document,"keydown",L),P&&l(document,r,P),L=null,P=null})),{images:b,isShow:k,initIndex:f,zIndexNum:w,isLockScroll:p,isCloseOnClickMask:h,imgViewrWrapper:S,imageRef:A,index:I,isSingle:M,infinite:x,isFirst:z,isLast:E,mode:O,currentImg:T,imgStyle:B,closeHandle:y,switchHandle:N,hide:D,prev:$,next:X,toggleMode:R,handleActions:Y,handleMaskClick:()=>{h.value&&D()},handleImgLoad:()=>{C.value=!1},handleImgError:()=>{C.value=!1;const e=A.value;e&&(e.alt="加载失败")},handleMouseDown:e=>{if(C.value||0!==e.button)return;const{offsetX:o,offsetY:n}=V,a=e.pageX,r=e.pageY;F=t((e=>{V.offsetX=o+e.pageX-a,V.offsetY=n+e.pageY-r})),i(document,"mousemove",F),i(document,"mouseup",(()=>{F&&l(document,"mousemove",F)})),e.preventDefault()}}}});const w=o.createVNode("i",{class:"img-viewr__icon icon__circle-close"},null,-1),p=o.createVNode("i",{class:"img-viewr__icon icon__arrow-left"},null,-1),h=o.createVNode("i",{class:"img-viewr__icon icon__arrow-right"},null,-1),k={class:"img-viewr__btn img-viewr__actions"},b={class:"img-viewr__actions__inner"},y=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),N=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),I=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),x={class:"img-viewr__canvas"};f.render=function(e,n,i,l,t,a){return o.openBlock(),o.createBlock(o.Transition,{name:"img-viewr-fade"},{default:o.withCtx((()=>[o.withDirectives(o.createVNode("div",{tabindex:"-1",ref:"imgViewrWrapper",class:"img-viewr__wrapper",style:`z-index: ${e.zIndexNum}`},[o.createVNode("div",{class:"img-viewr__mask",onClick:n[1]||(n[1]=o.withModifiers(((...o)=>e.handleMaskClick&&e.handleMaskClick(...o)),["self"]))}),o.createVNode("span",{class:"img-viewr__btn img-viewr__close",onClick:n[2]||(n[2]=(...o)=>e.hide&&e.hide(...o))},[w]),e.isSingle?o.createCommentVNode("",!0):(o.openBlock(),o.createBlock(o.Fragment,{key:0},[o.createVNode("span",{class:["img-viewr__btn img-viewr__prev",{"is-disabled":!e.infinite&&e.isFirst}],onClick:n[3]||(n[3]=(...o)=>e.prev&&e.prev(...o))},[p],2),o.createVNode("span",{class:["img-viewr__btn img-viewr__next",{"is-disabled":!e.infinite&&e.isLast}],onClick:n[4]||(n[4]=(...o)=>e.next&&e.next(...o))},[h],2)],64)),o.createVNode("div",k,[o.createVNode("div",b,[o.createVNode("i",{class:"img-viewr__icon icon__zoom-out",onClick:n[5]||(n[5]=o=>e.handleActions("zoomOut"))}),o.createVNode("i",{class:"img-viewr__icon icon__zoom-in",onClick:n[6]||(n[6]=o=>e.handleActions("zoomIn"))}),y,o.createVNode("i",{class:e.mode.icon,onClick:n[7]||(n[7]=(...o)=>e.toggleMode&&e.toggleMode(...o))},null,2),N,o.createVNode("i",{class:"img-viewr__icon icon__download-image",onClick:n[8]||(n[8]=o=>e.handleActions("download"))}),I,o.createVNode("i",{class:"img-viewr__icon icon__refresh-left",onClick:n[9]||(n[9]=o=>e.handleActions("anticlocelise"))}),o.createVNode("i",{class:"img-viewr__icon icon__refresh-right",onClick:n[10]||(n[10]=o=>e.handleActions("clocelise"))})])]),o.createVNode("div",x,[(o.openBlock(!0),o.createBlock(o.Fragment,null,o.renderList(e.images,((i,l)=>(o.openBlock(),o.createBlock(o.Fragment,null,[l===e.index?(o.openBlock(),o.createBlock("img",{class:"img-viewr__img",ref:"imageRef",key:i,src:e.currentImg,style:e.imgStyle,onLoad:n[11]||(n[11]=(...o)=>e.handleImgLoad&&e.handleImgLoad(...o)),onError:n[12]||(n[12]=(...o)=>e.handleImgError&&e.handleImgError(...o)),onMousedown:n[13]||(n[13]=(...o)=>e.handleMouseDown&&e.handleMouseDown(...o))},null,44,["src"])):o.createCommentVNode("",!0)],64)))),256))])],4),[[o.vShow,e.isShow]])])),_:1})};const C="undefined"==typeof window;let O;e.ImgViewr=f,e.default=f,e.showImages=e=>{var n,i,l,t,a;if(C)return;if(!(e.urls&&e.urls.length>0))throw new Error("At least one picture in urls array!");O||(()=>{const e=document.createElement("div"),n=o.createVNode(f,{});n&&n.props&&(n.props.onDestroy=()=>{o.render(null,e)}),o.render(n,e),O=n,e.firstElementChild&&document.body.appendChild(e.firstElementChild)})();const r=null==(n=null==O?void 0:O.component)?void 0:n.proxy;r.images=e.urls,r.initIndex=null!=(i=e.index)?i:0,r.zIndexNum=null!=(l=e.zIndex)?l:3e3,r.isLockScroll=null==(t=e.lockScroll)||t,r.isCloseOnClickMask=null==(a=e.closeOnClickMask)||a,r.closeHandle=()=>{var o;r.isShow=!1,null==(o=e.onClose)||o.call(e)},r.switchHandle=o=>{var n;null==(n=e.onSwitch)||n.call(e,o)},setTimeout((()=>{r.isShow=!0}),0)},Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+var __defProp=Object.defineProperty,__hasOwnProp=Object.prototype.hasOwnProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,o,n)=>o in e?__defProp(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,__assign=(e,o)=>{for(var n in o||(o={}))__hasOwnProp.call(o,n)&&__defNormalProp(e,n,o[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(o))__propIsEnum.call(o,n)&&__defNormalProp(e,n,o[n]);return e};!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["vue-img-viewr"]={},e.Vue)}(this,(function(e,o){"use strict";const n="undefined"==typeof window,i=(e,o,i,l=!1)=>{!n&&e&&o&&i&&e.addEventListener(o,i,l)},l=(e,o,i,l=!1)=>{!n&&e&&o&&i&&e.removeEventListener(o,i,l)};function t(e){let o=!1;return function(...n){o||(o=!0,window.requestAnimationFrame((()=>{e.apply(this,n),o=!1})))}}const a={CONTAIN:{name:"contain",icon:"img-viewr__icon icon__full-screen"},ORIGINAL:{name:"original",icon:"img-viewr__icon icon__scale-to-original"}},r=!n&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",c="close",s="switch",d="Escape",u="ArrowLeft",m="ArrowUp",_="ArrowRight",v="ArrowDown",g="Space";var f=o.defineComponent({name:"ImgViewr",props:{visible:{type:Boolean,default:!1},urls:{type:Array,default:()=>[]},zIndex:{type:Number,default:3e3},initialIndex:{type:Number,default:0},lockScroll:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!0}},emits:[c,s],setup(e,{emit:n}){const f=o.ref(0),w=o.ref(3e3),p=o.ref(!0),h=o.ref(!0),k=o.ref(!1),b=o.ref([]),y=o.ref(null),N=o.ref(null),I=o.ref(0),x=o.ref(!0),C=o.ref(!1),O=o.reactive(__assign({},a.CONTAIN)),V=o.reactive({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),S=o.ref(null),A=o.ref(null),M=o.computed((()=>b.value.length<=1)),z=o.computed((()=>0===I.value)),E=o.computed((()=>I.value===b.value.length-1)),T=o.computed((()=>b.value[I.value]||b.value[0])),B=o.computed((()=>{const{scale:e,deg:o,offsetX:n,offsetY:i,enableTransition:l}=V,t={transform:`scale(${e}) rotate(${o}deg)`,transition:l?"transform .3s":"","margin-left":`${n}px`,"margin-top":`${i}px`};return O.name===a.CONTAIN.name&&(t.maxWidth=t.maxHeight="100%"),t}));o.watchEffect((()=>{e.urls.length&&(b.value=e.urls,f.value=e.initialIndex,w.value=e.zIndex,p.value=e.lockScroll,h.value=e.closeOnClickMask)})),o.watch((()=>e.visible),(e=>{k.value=e})),o.watch(f,(e=>{e!==I.value&&(I.value=e)})),o.watch(k,(e=>{if(!p.value)return;let o=document.body.className;e?o.includes("img-viewr__body-lock")||(o+=" img-viewr__body-lock"):o=o.replace("img-viewr__body-lock",""),document.body.className=o.trim()})),o.watch(I,(e=>{var o;j(),null==(o=N.value)||o.call(N,e),n(s,e)})),o.watch(T,(()=>{o.nextTick((()=>{const e=A.value;e&&e.complete||(C.value=!0)}))}));const D=()=>{var e;null==(e=y.value)||e.call(y),n(c)};let L,P,F;const j=()=>{V.scale=1,V.deg=0,V.offsetX=0,V.offsetY=0,V.enableTransition=!1},R=()=>{if(C.value)return;const e=Object.keys(a),o=(Object.values(a).findIndex((({name:e})=>e===O.name))+1)%e.length,{name:n,icon:i}=a[e[o]];O.name=n,O.icon=i,j()},$=()=>{if(z.value&&!x.value)return;const e=b.value.length;I.value=(I.value-1+e)%e},X=()=>{if(E.value&&!x.value)return;const e=b.value.length;I.value=(I.value+1)%e},Y=(e,o={})=>{if(C.value)return;const{zoomRate:n,rotateDeg:i,enableTransition:l}=__assign({zoomRate:.2,rotateDeg:90,enableTransition:!0},o);switch(e){case"zoomOut":V.scale>.2&&(V.scale=parseFloat((V.scale-n).toFixed(3)));break;case"zoomIn":V.scale=parseFloat((V.scale+n).toFixed(3));break;case"clocelise":V.deg+=i;break;case"anticlocelise":V.deg-=i;break;case"download":((e,o,n)=>{const i=new Image,l=document.createElement("canvas"),t=l.getContext("2d"),a=document.createElement("a");i.setAttribute("crossOrigin","anonymous"),i.src=e,i.onerror=()=>{window.open(e)},i.onload=()=>{l.width=i.width,l.height=i.height,null==t||t.drawImage(i,0,0,i.width,i.height),a.setAttribute("href",l.toDataURL(`image/${n}`)),a.setAttribute("target","_blank"),a.setAttribute("download",`${o}.${n}`),a.click()}})(T.value,Date.now().toString(),"png")}V.enableTransition=l};return o.onMounted((()=>{var e,o;L=t((e=>{switch(e.code){case d:D();break;case g:R();break;case u:$();break;case m:Y("zoomIn");break;case _:X();break;case v:Y("zoomOut")}})),P=t((e=>{const o=e.wheelDelta?e.wheelDelta:-e.detail;Y(o>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),i(document,"keydown",L),i(document,r,P),null==(o=null==(e=null==S?void 0:S.value)?void 0:e.focus)||o.call(e)})),o.onBeforeUnmount((()=>{L&&l(document,"keydown",L),P&&l(document,r,P),L=null,P=null})),{images:b,isShow:k,initIndex:f,zIndexNum:w,isLockScroll:p,isCloseOnClickMask:h,imgViewrWrapper:S,imageRef:A,index:I,isSingle:M,infinite:x,isFirst:z,isLast:E,mode:O,currentImg:T,imgStyle:B,closeHandle:y,switchHandle:N,hide:D,prev:$,next:X,toggleMode:R,handleActions:Y,handleMaskClick:()=>{h.value&&D()},handleImgLoad:()=>{C.value=!1},handleImgError:()=>{C.value=!1;const e=A.value;e&&(e.alt="加载失败")},handleMouseDown:e=>{if(C.value||0!==e.button)return;const{offsetX:o,offsetY:n}=V,a=e.pageX,r=e.pageY;F=t((e=>{V.offsetX=o+e.pageX-a,V.offsetY=n+e.pageY-r})),i(document,"mousemove",F),i(document,"mouseup",(()=>{F&&l(document,"mousemove",F)})),e.preventDefault()}}}});const w=o.createVNode("i",{class:"img-viewr__icon icon__circle-close"},null,-1),p=o.createVNode("i",{class:"img-viewr__icon icon__arrow-left"},null,-1),h=o.createVNode("i",{class:"img-viewr__icon icon__arrow-right"},null,-1),k={class:"img-viewr__btn img-viewr__actions"},b={class:"img-viewr__actions__inner"},y=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),N=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),I=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),x={class:"img-viewr__canvas"};f.render=function(e,n,i,l,t,a){return o.openBlock(),o.createBlock(o.Transition,{name:"img-viewr-fade"},{default:o.withCtx((()=>[o.withDirectives(o.createVNode("div",{tabindex:"-1",ref:"imgViewrWrapper",class:"img-viewr__wrapper",style:`z-index: ${e.zIndexNum}`},[o.createVNode("div",{class:"img-viewr__mask",onClick:n[1]||(n[1]=o.withModifiers(((...o)=>e.handleMaskClick&&e.handleMaskClick(...o)),["self"]))}),o.createVNode("span",{class:"img-viewr__btn img-viewr__close",onClick:n[2]||(n[2]=(...o)=>e.hide&&e.hide(...o))},[w]),e.isSingle?o.createCommentVNode("",!0):(o.openBlock(),o.createBlock(o.Fragment,{key:0},[o.createVNode("span",{class:["img-viewr__btn img-viewr__prev",{"is-disabled":!e.infinite&&e.isFirst}],onClick:n[3]||(n[3]=(...o)=>e.prev&&e.prev(...o))},[p],2),o.createVNode("span",{class:["img-viewr__btn img-viewr__next",{"is-disabled":!e.infinite&&e.isLast}],onClick:n[4]||(n[4]=(...o)=>e.next&&e.next(...o))},[h],2)],64)),o.createVNode("div",k,[o.createVNode("div",b,[o.createVNode("i",{class:"img-viewr__icon icon__zoom-out",onClick:n[5]||(n[5]=o=>e.handleActions("zoomOut"))}),o.createVNode("i",{class:"img-viewr__icon icon__zoom-in",onClick:n[6]||(n[6]=o=>e.handleActions("zoomIn"))}),y,o.createVNode("i",{class:e.mode.icon,onClick:n[7]||(n[7]=(...o)=>e.toggleMode&&e.toggleMode(...o))},null,2),N,o.createVNode("i",{class:"img-viewr__icon icon__download-image",onClick:n[8]||(n[8]=o=>e.handleActions("download"))}),I,o.createVNode("i",{class:"img-viewr__icon icon__refresh-left",onClick:n[9]||(n[9]=o=>e.handleActions("anticlocelise"))}),o.createVNode("i",{class:"img-viewr__icon icon__refresh-right",onClick:n[10]||(n[10]=o=>e.handleActions("clocelise"))})])]),o.createVNode("div",x,[(o.openBlock(!0),o.createBlock(o.Fragment,null,o.renderList(e.images,((i,l)=>(o.openBlock(),o.createBlock(o.Fragment,null,[l===e.index?(o.openBlock(),o.createBlock("img",{class:"img-viewr__img",ref:"imageRef",key:i,src:e.currentImg,style:e.imgStyle,onLoad:n[11]||(n[11]=(...o)=>e.handleImgLoad&&e.handleImgLoad(...o)),onError:n[12]||(n[12]=(...o)=>e.handleImgError&&e.handleImgError(...o)),onMousedown:n[13]||(n[13]=(...o)=>e.handleMouseDown&&e.handleMouseDown(...o))},null,44,["src"])):o.createCommentVNode("",!0)],64)))),256))])],4),[[o.vShow,e.isShow]])])),_:1})};const C="undefined"==typeof window;let O;e.ImgViewr=f,e.default=f,e.showImages=e=>{var n,i,l,t,a;if(C)return;if(!(e.urls&&e.urls.length>0))throw new Error("At least one picture in urls array!");O||(()=>{const e=document.createElement("div"),n=o.createVNode(f,{});n&&n.props&&(n.props.onDestroy=()=>{o.render(null,e)}),o.render(n,e),O=n,e.firstElementChild&&document.body.appendChild(e.firstElementChild)})();const r=null==(n=null==O?void 0:O.component)?void 0:n.proxy;r.images=e.urls,r.initIndex=null!=(i=e.index)?i:0,r.zIndexNum=null!=(l=e.zIndex)?l:3e3,r.isLockScroll=null==(t=e.lockScroll)||t,r.isCloseOnClickMask=null==(a=e.closeOnClickMask)||a,r.closeHandle=()=>{var o;r.isShow=!1,null==(o=e.onClose)||o.call(e)},r.switchHandle=o=>{var n;null==(n=e.onSwitch)||n.call(e,o)},setTimeout((()=>{r.isShow=!0}),0)},Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));

package.json

 {
   "name": "vue-img-viewr",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "vue图片查看组件（vue image viewer component），with vue@3.x",
@@ -5,0 +5,0 @@ "author": "jekorx",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50898

increased by0.15%

No dependency changes