vue-img-viewr - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

lib/vue-img-viewr.es.js

@@ -1,1 +0,1 @@
-var e=Object.defineProperty,n=Object.prototype.hasOwnProperty,i=Object.getOwnPropertySymbols,l=Object.prototype.propertyIsEnumerable,o=(n,i,l)=>i in n?e(n,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[i]=l,a=(e,a)=>{for(var t in a||(a={}))n.call(a,t)&&o(e,t,a[t]);if(i)for(var t of i(a))l.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 w,createBlock as _,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,i,l=!1)=>{!A&&e&&n&&i&&e.addEventListener(n,i,l)},S=(e,n,i,l=!1)=>{!A&&e&&n&&i&&e.removeEventListener(n,i,l)};function M(e){let n=!1;return function(...i){n||(n=!0,window.requestAnimationFrame((()=>{e.apply(this,i),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"}},L=!A&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",D="Escape",N="ArrowLeft",T="ArrowUp",$="ArrowRight",R="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 i=s(0),l=s(3e3),o=s(!0),t=s(!0),w=s(!1),_=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((()=>_.value.length<=1)),A=c((()=>0===p.value)),X=c((()=>p.value===_.value.length-1)),Y=c((()=>_.value[p.value]||_.value[0])),j=c((()=>{const{scale:e,deg:n,offsetX:i,offsetY:l,enableTransition:o}=I,a={transform:`scale(${e}) rotate(${n}deg)`,transition:o?"transform .3s":"","margin-left":`${i}px`,"margin-top":`${l}px`};return y.name===E.CONTAIN.name&&(a.maxWidth=a.maxHeight="100%"),a}));u((()=>{e.urls.length&&(_.value=e.urls,i.value=e.initialIndex,l.value=e.zIndex,o.value=e.lockScroll,t.value=e.closeOnClickMask)})),d((()=>e.visible),(e=>{w.value=e})),d(i,(e=>{e!==p.value&&(p.value=e)})),d(w,(e=>{if(!o.value)return;const n=document.body.classList;e?n.contains("img-viewr__body-lock")||n.add("img-viewr__body-lock"):n.contains("img-viewr__body-lock")&&n.remove("img-viewr__body-lock")})),d(p,(e=>{var i;W(),null==(i=h.value)||i.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 P,V,B;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:i,icon:l}=E[e[n]];y.name=i,y.icon=l,W()},q=()=>{if(A.value&&!k.value)return;const e=_.value.length;p.value=(p.value-1+e)%e},G=()=>{if(X.value&&!k.value)return;const e=_.value.length;p.value=(p.value+1)%e},J=(e,n={})=>{if(b.value)return;const{zoomRate:i,rotateDeg:l,enableTransition:o}=a({zoomRate:.2,rotateDeg:90,enableTransition:!0},n);switch(e){case"zoomOut":I.scale>.2&&(I.scale=parseFloat((I.scale-i).toFixed(3)));break;case"zoomIn":I.scale=parseFloat((I.scale+i).toFixed(3));break;case"clocelise":I.deg+=l;break;case"anticlocelise":I.deg-=l;break;case"download":((e,n,i)=>{const l=new Image,o=document.createElement("canvas"),a=o.getContext("2d"),t=document.createElement("a");l.setAttribute("crossOrigin","anonymous"),l.src=e,l.onerror=()=>{window.open(e)},l.onload=()=>{o.width=l.width,o.height=l.height,null==a||a.drawImage(l,0,0,l.width,l.height),t.setAttribute("href",o.toDataURL(`image/${i}`)),t.setAttribute("target","_blank"),t.setAttribute("download",`${n}.${i}`),t.click()}})(Y.value,Date.now().toString(),"png")}I.enableTransition=o};return v((()=>{var e,n;P=M((e=>{switch(e.code){case D:H();break;case F:U();break;case N:q();break;case T:J("zoomIn");break;case $:G();break;case R:J("zoomOut")}})),V=M((e=>{const n=e.wheelDelta?e.wheelDelta:-e.detail;J(n>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),z(document,"keydown",P),z(document,L,V),null==(n=null==(e=null==x?void 0:x.value)?void 0:e.focus)||n.call(e)})),g((()=>{P&&S(document,"keydown",P),V&&S(document,L,V),P=null,V=null})),{images:_,isShow:w,initIndex:i,zIndexNum:l,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:i}=I,l=e.pageX,o=e.pageY;B=M((e=>{I.offsetX=n+e.pageX-l,I.offsetY=i+e.pageY-o})),z(document,"mousemove",B),z(document,"mouseup",(()=>{B&&S(document,"mousemove",B)})),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),P={class:"img-viewr__btn img-viewr__actions"},V={class:"img-viewr__actions__inner"},B=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,i,l,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",P,[k("div",V,[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"))}),B,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,[(w(!0),_(y,null,x(e.images,((i,l)=>(w(),_(y,null,[l===e.index?(w(),_("img",{class:"img-viewr__img",ref:"imageRef",key:i,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,i,l,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!=(i=e.index)?i:0,t.zIndexNum=null!=(l=e.zIndex)?l: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 i;null==(i=e.onSwitch)||i.call(e,n)},setTimeout((()=>{t.isShow=!0}),0)};X.showImages=K,X.install=e=>{e.config.globalProperties.$showImages=K,e.component(X.name,X)};export default X;export{X as ImgViewr,K as showImages};
+var e=Object.defineProperty,n=Object.prototype.hasOwnProperty,i=Object.getOwnPropertySymbols,l=Object.prototype.propertyIsEnumerable,o=(n,i,l)=>i in n?e(n,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[i]=l,a=(e,a)=>{for(var t in a||(a={}))n.call(a,t)&&o(e,t,a[t]);if(i)for(var t of i(a))l.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 w,createBlock as _,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,i,l=!1)=>{!A&&e&&n&&i&&e.addEventListener(n,i,l)},S=(e,n,i,l=!1)=>{!A&&e&&n&&i&&e.removeEventListener(n,i,l)};function M(e){let n=!1;return function(...i){n||(n=!0,window.requestAnimationFrame((()=>{e.apply(this,i),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"}},L=!A&&window.navigator.userAgent.match(/firefox/i)?"DOMMouseScroll":"mousewheel",D="Escape",N="ArrowLeft",T="ArrowUp",$="ArrowRight",R="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 i=s(0),l=s(3e3),o=s(!0),t=s(!0),w=s(!1),_=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((()=>_.value.length<=1)),A=c((()=>0===p.value)),X=c((()=>p.value===_.value.length-1)),Y=c((()=>_.value[p.value]||_.value[0])),j=c((()=>{const{scale:e,deg:n,offsetX:i,offsetY:l,enableTransition:o}=I,a={transform:`scale(${e}) rotate(${n}deg)`,transition:o?"transform .3s":"","margin-left":`${i}px`,"margin-top":`${l}px`};return y.name===E.CONTAIN.name&&(a.maxWidth=a.maxHeight="100%"),a}));u((()=>{e.urls.length&&(_.value=e.urls,i.value=e.initialIndex,l.value=e.zIndex,o.value=e.lockScroll,t.value=e.closeOnClickMask)})),d((()=>e.visible),(e=>{w.value=e})),d(i,(e=>{e!==p.value&&(p.value=e)})),d(w,(e=>{if(!o.value)return;const n=document.body.classList;e?(W(),n.contains("img-viewr__body-lock")||n.add("img-viewr__body-lock")):n.contains("img-viewr__body-lock")&&n.remove("img-viewr__body-lock")})),d(p,(e=>{var i;W(),null==(i=h.value)||i.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 P,V,B;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:i,icon:l}=E[e[n]];y.name=i,y.icon=l,W()},q=()=>{if(A.value&&!k.value)return;const e=_.value.length;p.value=(p.value-1+e)%e},G=()=>{if(X.value&&!k.value)return;const e=_.value.length;p.value=(p.value+1)%e},J=(e,n={})=>{if(b.value)return;const{zoomRate:i,rotateDeg:l,enableTransition:o}=a({zoomRate:.2,rotateDeg:90,enableTransition:!0},n);switch(e){case"zoomOut":I.scale>.2&&(I.scale=parseFloat((I.scale-i).toFixed(3)));break;case"zoomIn":I.scale=parseFloat((I.scale+i).toFixed(3));break;case"clocelise":I.deg+=l;break;case"anticlocelise":I.deg-=l;break;case"download":((e,n,i)=>{const l=new Image,o=document.createElement("canvas"),a=o.getContext("2d"),t=document.createElement("a");l.setAttribute("crossOrigin","anonymous"),l.src=e,l.onerror=()=>{window.open(e)},l.onload=()=>{o.width=l.width,o.height=l.height,null==a||a.drawImage(l,0,0,l.width,l.height),t.setAttribute("href",o.toDataURL(`image/${i}`)),t.setAttribute("target","_blank"),t.setAttribute("download",`${n}.${i}`),t.click()}})(Y.value,Date.now().toString(),"png")}I.enableTransition=o};return v((()=>{var e,n;P=M((e=>{switch(e.code){case D:H();break;case F:U();break;case N:q();break;case T:J("zoomIn");break;case $:G();break;case R:J("zoomOut")}})),V=M((e=>{const n=e.wheelDelta?e.wheelDelta:-e.detail;J(n>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),z(document,"keydown",P),z(document,L,V),null==(n=null==(e=null==x?void 0:x.value)?void 0:e.focus)||n.call(e)})),g((()=>{P&&S(document,"keydown",P),V&&S(document,L,V),P=null,V=null})),{images:_,isShow:w,initIndex:i,zIndexNum:l,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:i}=I,l=e.pageX,o=e.pageY;B=M((e=>{I.offsetX=n+e.pageX-l,I.offsetY=i+e.pageY-o})),z(document,"mousemove",B),z(document,"mouseup",(()=>{B&&S(document,"mousemove",B)})),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),P={class:"img-viewr__btn img-viewr__actions"},V={class:"img-viewr__actions__inner"},B=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,i,l,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",P,[k("div",V,[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"))}),B,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,[(w(!0),_(y,null,x(e.images,((i,l)=>(w(),_(y,null,[l===e.index?(w(),_("img",{class:"img-viewr__img",ref:"imageRef",key:i,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,i,l,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!=(i=e.index)?i:0,t.zIndexNum=null!=(l=e.zIndex)?l: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 i;null==(i=e.onSwitch)||i.call(e,n)},setTimeout((()=>{t.isShow=!0}),0)};X.showImages=K,X.install=e=>{e.config.globalProperties.$showImages=K,e.component(X.name,X)};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",g="ArrowRight",_="ArrowDown",v="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),I=o.ref(null),N=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===N.value)),E=o.computed((()=>N.value===b.value.length-1)),T=o.computed((()=>b.value[N.value]||b.value[0])),L=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!==N.value&&(N.value=e)})),o.watch(k,(e=>{if(!p.value)return;const o=document.body.classList;e?o.contains("img-viewr__body-lock")||o.add("img-viewr__body-lock"):o.contains("img-viewr__body-lock")&&o.remove("img-viewr__body-lock")})),o.watch(N,(e=>{var o;$(),null==(o=I.value)||o.call(I,e),n(s,e)})),o.watch(T,(()=>{o.nextTick((()=>{const e=A.value;e&&e.complete||(C.value=!0)}))}));const P=()=>{var e;null==(e=y.value)||e.call(y),n(c)};let B,D,F;const $=()=>{V.scale=1,V.deg=0,V.offsetX=0,V.offsetY=0,V.enableTransition=!1},j=()=>{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,$()},R=()=>{if(z.value&&!x.value)return;const e=b.value.length;N.value=(N.value-1+e)%e},X=()=>{if(E.value&&!x.value)return;const e=b.value.length;N.value=(N.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;B=t((e=>{switch(e.code){case d:P();break;case v:j();break;case u:R();break;case m:Y("zoomIn");break;case g:X();break;case _:Y("zoomOut")}})),D=t((e=>{const o=e.wheelDelta?e.wheelDelta:-e.detail;Y(o>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),i(document,"keydown",B),i(document,r,D),null==(o=null==(e=null==S?void 0:S.value)?void 0:e.focus)||o.call(e)})),o.onBeforeUnmount((()=>{B&&l(document,"keydown",B),D&&l(document,r,D),B=null,D=null})),{images:b,isShow:k,initIndex:f,zIndexNum:w,isLockScroll:p,isCloseOnClickMask:h,imgViewrWrapper:S,imageRef:A,index:N,isSingle:M,infinite:x,isFirst:z,isLast:E,mode:O,currentImg:T,imgStyle:L,closeHandle:y,switchHandle:I,hide:P,prev:R,next:X,toggleMode:j,handleActions:Y,handleMaskClick:()=>{h.value&&P()},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),I=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),N=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),I,o.createVNode("i",{class:"img-viewr__icon icon__download-image",onClick:n[8]||(n[8]=o=>e.handleActions("download"))}),N,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;const V=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)};f.showImages=V,f.install=e=>{e.config.globalProperties.$showImages=V,e.component(f.name,f)},e.ImgViewr=f,e.default=f,e.showImages=V,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",g="ArrowRight",_="ArrowDown",v="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),I=o.ref(null),N=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===N.value)),E=o.computed((()=>N.value===b.value.length-1)),T=o.computed((()=>b.value[N.value]||b.value[0])),L=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!==N.value&&(N.value=e)})),o.watch(k,(e=>{if(!p.value)return;const o=document.body.classList;e?($(),o.contains("img-viewr__body-lock")||o.add("img-viewr__body-lock")):o.contains("img-viewr__body-lock")&&o.remove("img-viewr__body-lock")})),o.watch(N,(e=>{var o;$(),null==(o=I.value)||o.call(I,e),n(s,e)})),o.watch(T,(()=>{o.nextTick((()=>{const e=A.value;e&&e.complete||(C.value=!0)}))}));const P=()=>{var e;null==(e=y.value)||e.call(y),n(c)};let B,D,F;const $=()=>{V.scale=1,V.deg=0,V.offsetX=0,V.offsetY=0,V.enableTransition=!1},j=()=>{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,$()},R=()=>{if(z.value&&!x.value)return;const e=b.value.length;N.value=(N.value-1+e)%e},X=()=>{if(E.value&&!x.value)return;const e=b.value.length;N.value=(N.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;B=t((e=>{switch(e.code){case d:P();break;case v:j();break;case u:R();break;case m:Y("zoomIn");break;case g:X();break;case _:Y("zoomOut")}})),D=t((e=>{const o=e.wheelDelta?e.wheelDelta:-e.detail;Y(o>0?"zoomIn":"zoomOut",{zoomRate:.05,enableTransition:!1})})),i(document,"keydown",B),i(document,r,D),null==(o=null==(e=null==S?void 0:S.value)?void 0:e.focus)||o.call(e)})),o.onBeforeUnmount((()=>{B&&l(document,"keydown",B),D&&l(document,r,D),B=null,D=null})),{images:b,isShow:k,initIndex:f,zIndexNum:w,isLockScroll:p,isCloseOnClickMask:h,imgViewrWrapper:S,imageRef:A,index:N,isSingle:M,infinite:x,isFirst:z,isLast:E,mode:O,currentImg:T,imgStyle:L,closeHandle:y,switchHandle:I,hide:P,prev:R,next:X,toggleMode:j,handleActions:Y,handleMaskClick:()=>{h.value&&P()},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),I=o.createVNode("i",{class:"img-viewr__actions__divider"},null,-1),N=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),I,o.createVNode("i",{class:"img-viewr__icon icon__download-image",onClick:n[8]||(n[8]=o=>e.handleActions("download"))}),N,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;const V=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)};f.showImages=V,f.install=e=>{e.config.globalProperties.$showImages=V,e.component(f.name,f)},e.ImgViewr=f,e.default=f,e.showImages=V,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));

package.json

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

README.md

@@ -7,5 +7,5 @@ # vue-img-viewr
 
-> ❗ 如需在```vue@2.x```中使用，请使用 [![vue-img-viewr@1.0.4](https://img.shields.io/badge/npm%20vue--img--viewr-v1.0.4-blue)](https://www.npmjs.com/package/vue-img-viewr/v/1.0.4)，Github v1.x地址 [![github 1.x](https://img.shields.io/badge/github%20vue--img--viewr-1.x-green)](https://github.com/jekorx/vue-img-viewr/tree/1.x)  
-> ```yarn add vue-img-viewr@^1.0.4```  
-> ```npm i vue-img-viewr@^1.0.4 -S```  
+> ❗ 如需在```vue@2.x```中使用，请使用 [![vue-img-viewr@1.0.5](https://img.shields.io/badge/npm%20vue--img--viewr-v1.0.5-blue)](https://www.npmjs.com/package/vue-img-viewr/v/1.0.5)，Github v1.x地址 [![github 1.x](https://img.shields.io/badge/github%20vue--img--viewr-1.x-green)](https://github.com/jekorx/vue-img-viewr/tree/1.x)  
+> ```yarn add vue-img-viewr@^1.0.5```  
+> ```npm i vue-img-viewr@^1.0.5 -S```  
 
@@ -12,0 +12,0 @@ ### 示例

types/index.d.ts

@@ -0,0 +0,0 @@ import { App } from 'vue'

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

50329

increased by0.07%

No dependency changes