hevue-img-preview/dist/v3/index.js

> 本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义，实现个性化设计，如果能帮上你，希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ，或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星，如果有任何使用意见或建议

(function(d,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(d=typeof globalThis<"u"?globalThis:d||self,i(d.hevueImgPreview={},d.Vue))})(this,function(d,i){"use strict";function x(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const b=x(i),I=(e,t)=>{const o=e.__vccOpts||e;for(const[l,n]of t)o[l]=n;return o},v={name:"hevue-img-preview",data(){return{vue:b,showHevueImgRotate:!1,visible:!1,imgScale:1,imgTop:0,imgLeft:0,imgRotate:0,isFull:!1,maxWH:{"max-width":"100%","max-height":"100%"},clientX:0,clientY:0,imgIndex:0,canRun:!0,imgurl:"",imgState:1,start:[{},{}],fromIndex:0,mobileScale:0,imgList:[],nowImgIndex:0,thumbnail:!0,controlBar:[],closeBtn:!0,arrowBtn:!0,keyboard:!0,clickMaskCLose:!0,closeFn:null,changeFn:null,customStyle:{},themeName:"glass",disabledImgRightClick:!1,showTranstion:!1,needLoadImg:[],showHevueImgHelp:!1,locale:"zhCN",shortI18n:{zhCN:{key27:"退出预览",key65:"上一张",key68:"下一张",key87:"放大",key83:"缩小",key37:"上一张",key39:"下一张",key38:"放大",key40:"缩小",key81:"逆时针旋转",key69:"顺时针旋转",key82:"重置旋转"},en:{key27:"Exit preview",key65:"Previous",key68:"Next",key87:"Zoom in",key83:"Zoom out",key37:"Previous",key39:"Next",key38:"Zoom in",key40:"Zoom out",key81:"Rotate counterclockwise",key69:"Rotate clockwise",key82:"Reset rotation"}},shortcutList:[{keyNum:27,keyName:"Esc",desc:"key27",handle:()=>{this.close({way:"esc"})}},{keyNum:65,keyName:"A",desc:"key65",handle:()=>{this.multiple&&this.prevNextHandle(!1,"key-a")}},{keyNum:68,keyName:"D",desc:"key68",handle:()=>{this.multiple&&this.prevNextHandle(!0,"key-d")}},{keyNum:87,keyName:"W",desc:"key87",handle:()=>{this.scaleFunc(.15)}},{keyNum:83,keyName:"S",desc:"key83",handle:()=>{this.scaleFunc(-.15)}},{keyNum:37,keyName:"←",desc:"key37",handle:()=>{this.multiple&&this.prevNextHandle(!1,"key-left")}},{keyNum:39,keyName:"→",desc:"key39",handle:()=>{this.multiple&&this.prevNextHandle(!0,"key-right")}},{keyNum:38,keyName:"↑",desc:"key38",handle:()=>{this.scaleFunc(.15)}},{keyNum:40,keyName:"↓",desc:"key40",handle:()=>{this.scaleFunc(-.15)}},{keyNum:81,keyName:"Q",desc:"key81",handle:()=>{this.rotateFunc(-90)}},{keyNum:69,keyName:"E",desc:"key69",handle:()=>{this.rotateFunc(90)}},{keyNum:82,keyName:"R",desc:"key82",handle:()=>{this.initImg()}}],controlbarI18n:{zhCN:{zoomOut:"缩小",zoomIn:"放大",rotateLeft:"向左旋转",customRotate:"自定义旋转",rotateRight:"向右旋转",reset:"复位",prev:"上一个",next:"下一个",download:"下载",help:"帮助"},en:{zoomOut:"Zoom Out",zoomIn:"Zoom In",rotateLeft:"Rotate Left",customRotate:"Custom Rotate",rotateRight:"Rotate Right",reset:"Reset",prev:"Prev",next:"Next",download:"Download",help:"Help"}},controlbarAllItems:[{key:"zoomOut",icon:"&#xe65e;",title:"zoomOut",show:()=>!0,handle:()=>{this.scaleFunc(-.15)}},{key:"zoomIn",icon:"&#xe65d;",title:"zoomIn",show:()=>!0,handle:()=>{this.scaleFunc(.15)}},{key:"rotateLeft",icon:"&#xe662;",title:"rotateLeft",show:()=>!0,handle:()=>{this.rotateFunc(-90)}},{key:"customRotate",icon:"&#xe927;",title:"customRotate",show:()=>!0,handle:()=>{this.showHevueImgRotate=!this.showHevueImgRotate}},{key:"rotateRight",icon:"&#xe663;",title:"rotateRight",show:()=>!0,handle:()=>{this.rotateFunc(90)}},{key:"reset",icon:"&#xe86b;",title:"reset",show:()=>!0,handle:()=>{this.initImg()}},{key:"prev",icon:"&#xe62f;",title:"prev",show:()=>()=>this.multiple,handle:()=>{this.prevNextHandle(!1,"control-bar")}},{key:"next",icon:"&#xe62e;",title:"next",show:()=>()=>this.multiple,handle:()=>{this.prevNextHandle(!0,"control-bar")}},{key:"download",icon:"&#xe694;",title:"download",show:()=>!0,handle:()=>{this.downloadIamge()}},{key:"help",icon:"&#xe626;",title:"help",show:()=>this.keyboard,handle:()=>{this.showHevueImgHelp=!this.showHevueImgHelp}}]}},created(){},mounted(){this.initImg()},computed:{vueVersion(){return parseInt(this.vue.version)},controlbarShowItems(){return this.controlBar.map(e=>this.controlbarAllItems.find(o=>o.key===e))},multiple(){return Array.isArray(this.imgList)&&this.imgList.length>1},getImgPostion(){return{...this.maxWH,transform:`scale(${this.imgScale}) rotate(${this.imgRotate}deg)`,marginTop:this.imgTop+"px",marginLeft:this.imgLeft+"px"}}},watch:{customStyle:{handler(e){let t=Object.entries(e);this.$nextTick(()=>{t.length>0&&t.forEach(o=>{let l=o[0],n=o[1],s=document.querySelector(".hevue-imgpreview-wrap");s&&s.style.setProperty(l,n)})})},immediate:!0,deep:!0},url(){this.initImg()},visible:{handler(e){e&&this.$nextTick(()=>{let t=document.getElementById("hevue-imgpreview-wrap");t.onmousewheel=this.scrollFunc,document.body.addEventListener("DOMMouseScroll",this.scrollFunc),document.ondragstart=function(){return!1},this.themeName&&t.classList.add(this.themeName),this.disableTransition&&t.classList.add("disableTransition"),Array.isArray(this.controlBar)?this.controlBar.length===0&&(this.controlBar=this.controlbarAllItems.map(o=>o.key)):this.controlBar=[],this.url&&(!this.imgList||this.imgList.length===0)&&(this.imgList=[this.url]),this.imgIndex=Number(this.nowImgIndex)||0,this.changeUrl(this.imgList[this.imgIndex],this.imgIndex),this.keyboard&&document.addEventListener("keydown",this.keyHandleDebounce)})},immediate:!0}},methods:{show(){this.visible=!0,setTimeout(()=>{this.showTranstion=!0},20)},close(e){this.showTranstion=!1,setTimeout(()=>{this.initImg(),document.body.removeEventListener("DOMMouseScroll",this.scrollFunc),document.ondragstart=null,this.keyboard&&document.removeEventListener("keydown",this.keyHandleDebounce),this.visible=!1,this.closeFn&&this.closeFn(e),this.showHevueImgHelp=!1,this.imgList=[]},500)},initImg(){this.mobileScale=1,this.imgScale=1,this.imgRotate=0,this.imgTop=0,this.imgLeft=0},imgContextMenu(e){e=e||window.event,this.disabledImgRightClick&&e.preventDefault()},prevNextHandle(e,t){let o=0;e?(o=this.imgIndex+1,o>this.imgList.length-1&&(o=0)):(o=this.imgIndex-1,o<0&&(o=this.imgList.length-1)),this.toogleImg(o,t,e)},toogleImg(e,t,o){if(this.imgIndex===e)return;this.fromIndex=this.imgIndex;let l=this.imgIndex;this.imgIndex=e;let n=t=="thumb"?"thumb":o?"next":"prev";this.changeFn&&this.changeFn({type:n,fromImgIndex:l,fromImgUrl:this.imgList[l],toImgIndex:this.imgIndex,toImgUrl:this.imgList[this.imgIndex],way:t}),this.changeUrl(this.imgList[this.imgIndex],this.imgIndex)},changeUrl(e,t){this.needLoadImg.find(l=>l.index==t)?this.imgState=2:(this.imgState=1,this.needLoadImg.push({url:e,index:t}),this.$nextTick(()=>{let l=this.$refs["heImg"+t][0];l.onload=()=>{t!=null&&t==this.imgIndex?this.imgState=2:t==null&&(this.imgState=2)},l.onerror=()=>{t!=null&&t==this.imgIndex?this.imgState=3:t==null&&(this.imgState=3)}}))},getThumbLeft(){return-(this.imgIndex*100+50)},rotateFunc(e){let t=+this.imgRotate+e;t>360?t=t-360:t<0&&(t=360+t),this.imgRotate=t},scaleFunc(e,t){this.imgScale<=.2&&e<0||(t?this.imgScale=e:this.imgScale+=e)},imgToggle(){this.initImg(),this.isFull?this.maxWH={"max-width":"100%","max-height":"100%"}:this.maxWH="",this.isFull=!this.isFull},scrollFunc(e){e=e||window.event,e.delta=e.wheelDelta||-e.detail,e.preventDefault(),e.delta>0&&this.scaleFunc(.05),e.delta<0&&this.scaleFunc(-.05)},addMove(e){e=e||window.event,this.clientX=e.clientX,this.clientY=e.clientY,this.$refs.heImg.onmousemove=this.moveFunc},addMoveMobile(e){e.preventDefault(),e=e||window.event,e.touches.length>1?this.start=e.touches:(this.clientX=e.touches[0].pageX,this.clientY=e.touches[0].pageY),this.$refs.heImg.ontouchmove=this.moveFuncMobile},moveFunc(e){e=e||window.event,e.preventDefault();let t=e.clientX-this.clientX,o=e.clientY-this.clientY;this.imgLeft+=t*2,this.imgTop+=o*2,this.clientX=e.clientX,this.clientY=e.clientY},moveFuncMobile(e){if(e=e||window.event,e.touches.length>1){var t=e.touches,o=this.getDistance(t[0],t[1])/this.getDistance(this.start[0],this.start[1]);this.mobileScale?o>1?this.scaleFunc(o+this.mobileScale-1,!0):this.scaleFunc(o*this.mobileScale,!0):this.scaleFunc(o,!0)}else{let l=e.touches[0];e.preventDefault();let n=l.pageX-this.clientX,s=l.pageY-this.clientY;this.imgLeft+=n*2,this.imgTop+=s*2,this.clientX=l.pageX,this.clientY=l.pageY}},removeMove(e){e==="pc"?this.$refs.heImg.onmousemove=null:(this.mobileScale=this.imgScale,this.$refs.heImg.ontouchmove=null)},keyHandleDebounce(e){this.canRun&&(this.keyHandle(e),this.canRun=!1,setTimeout(()=>{this.canRun=!0},100))},keyHandle(e){e=window.event||e;var t=e.keyCode||e.which||e.charCode;let o=this.shortcutList.find(l=>l.keyNum===t);o&&o.handle()},clickMask(){this.clickMaskCLose&&this.close({way:"mask"})},getDistance(e,t){var o=t.pageX-e.pageX,l=t.pageY-e.pageY;return Math.sqrt(o*o+l*l)},downloadIamge(){let e=new Image;e.setAttribute("crossOrigin","anonymous"),e.onload=function(){let t=document.createElement("canvas");t.width=e.width,t.height=e.height,t.getContext("2d").drawImage(e,0,0,e.width,e.height);let l=t.toDataURL("image/png"),n=document.createElement("a"),s=new MouseEvent("click");n.download="photo"+ +new Date,n.href=l,n.dispatchEvent(s)},e.onerror=function(t){console.log("图片信息不正确或图片服务器禁止访问"),console.log(t)},e.src=this.imgList[this.imgIndex]},isValidColor(e,t,o,l){if(l<128)return!1;const n=(e+t+o)/3;return!(n>240||n<15)},getDominantColorWithFilter(e){const t=document.createElement("canvas"),o=t.getContext("2d"),l=100,n=Math.min(l/e.naturalWidth,l/e.naturalHeight,1);t.width=e.width*n,t.height=e.height*n,o.drawImage(e,0,0);const r=o.getImageData(0,0,t.width,t.height).data,a={};let m=0,c="";for(let h=0;h<r.length;h+=4){const y=r[h],p=r[h+1],w=r[h+2],_=r[h+3];if(!this.isValidColor(y,p,w,_))continue;const u=`${y},${p},${w}`;a[u]=(a[u]||0)+1,a[u]>m&&(m=a[u],c=u)}const g=document.querySelector(".hevue-imgpreview-wrap.glass");return g.style.setProperty("--hevueimg-main-text-color",`rgb(${c}, .7)`),g.style.setProperty("--hevueimg-main-text-color",`rgb(${c}, .5)`),c},rgbToHsl(e,t,o){e/=255,t/=255,o/=255;const l=Math.max(e,t,o),n=Math.min(e,t,o);let s,r,a=(l+n)/2;if(l===n)s=r=0;else{const m=l-n;switch(r=a>.5?m/(2-l-n):m/(l+n),l){case e:s=(t-o)/m+(t<o?6:0);break;case t:s=(o-e)/m+2;break;case o:s=(e-t)/m+4;break}s/=6}return[s*360,r,a]},hslToRgb(e,t,o){e/=360;let l,n,s;if(t===0)l=n=s=o;else{const r=(c,g,h)=>(h<0&&(h+=1),h>1&&(h-=1),h<.16666666666666666?c+(g-c)*6*h:h<.5?g:h<.6666666666666666?c+(g-c)*(.6666666666666666-h)*6:c),a=o<.5?o*(1+t):o+t-o*t,m=2*o-a;l=r(m,a,e+1/3),n=r(m,a,e),s=r(m,a,e-1/3)}return[Math.round(l*255),Math.round(n*255),Math.round(s*255)]},adjustColor(e,t=.5){const[o,l]=this.rgbToHsl(...e);return this.hslToRgb(o,l,t)}}},N={class:"heimgfont hevue-img-status-icon rotate-animation"},M=["src"],B=["src"],C={class:"heimgfont hevue-img-status-icon"},L={class:"he-bottom-wrap"},S={class:"hevue-custom-rotate-wrap"},E={class:"hevue-custom-range-label theme-item"},F=["onClick","innerHTML","title"],R={key:1,class:"he-imglist-wrap"},T=["onClick"],D=["src"],H={key:2,class:"he-control-num theme-item"},V={class:"hevue-img-help-wrap theme-item"},z={class:"hevue-img-help-item-label"},O={class:"hevue-img-help-item-desc"},P={style:{display:"none"}};function X(e,t,o,l,n,s){return n.visible?(i.openBlock(),i.createElementBlock("div",{key:0,class:"hevue-imgpreview-wrap",id:"hevue-imgpreview-wrap",ref:"heImg",onMouseup:t[15]||(t[15]=r=>s.removeMove("pc")),onTouchend:t[16]||(t[16]=r=>s.removeMove("mobile"))},[i.createElementVNode("div",{class:i.normalizeClass(["hevue-img-mask",{heShow:n.showTranstion}]),onClick:t[0]||(t[0]=i.withModifiers((...r)=>s.clickMask&&s.clickMask(...r),["stop"]))},null,2),i.createElementVNode("div",{class:i.normalizeClass(["he-img-wrap",{heShow:n.showTranstion}])},[i.withDirectives(i.createElementVNode("div",N,"  ",512),[[i.vShow,n.imgState===1]]),s.vueVersion>2?(i.openBlock(),i.createBlock(i.TransitionGroup,{key:0,name:"fade"},{default:i.withCtx(()=>[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.needLoadImg,r=>i.withDirectives((i.openBlock(),i.createElementBlock("img",{src:r.url,onClick:t[1]||(t[1]=i.withModifiers(()=>{},["stop"])),key:r.index,ref_for:!0,ref:"heImg"+r.index,class:"he-img-view",style:i.normalizeStyle([n.imgIndex,n.fromIndex].includes(r.index)?s.getImgPostion:n.maxWH),onContextmenu:t[2]||(t[2]=(...a)=>s.imgContextMenu&&s.imgContextMenu(...a)),onMousedown:t[3]||(t[3]=(...a)=>s.addMove&&s.addMove(...a)),onTouchstart:t[4]||(t[4]=(...a)=>s.addMoveMobile&&s.addMoveMobile(...a))},null,44,M)),[[i.vShow,n.imgState===2&&n.imgIndex==r.index]])),128))]),_:1})):(i.openBlock(!0),i.createElementBlock(i.Fragment,{key:1},i.renderList(n.needLoadImg,r=>i.withDirectives((i.openBlock(),i.createElementBlock("img",{src:r.url,onClick:t[5]||(t[5]=i.withModifiers(()=>{},["stop"])),key:r.index,ref_for:!0,ref:"heImg"+r.index,class:"he-img-view",style:i.normalizeStyle([n.imgIndex,n.fromIndex].includes(r.index)?s.getImgPostion:n.maxWH),onContextmenu:t[6]||(t[6]=(...a)=>s.imgContextMenu&&s.imgContextMenu(...a)),onMousedown:t[7]||(t[7]=(...a)=>s.addMove&&s.addMove(...a)),onTouchstart:t[8]||(t[8]=(...a)=>s.addMoveMobile&&s.addMoveMobile(...a))},null,44,B)),[[i.vShow,n.imgState===2&&n.imgIndex==r.index]])),128)),i.withDirectives(i.createElementVNode("div",C,"  ",512),[[i.vShow,n.imgState===3]]),n.closeBtn?(i.openBlock(),i.createElementBlock("div",{key:2,class:"heimgfont he-close-icon theme-item",onClick:t[9]||(t[9]=i.withModifiers(r=>s.close({way:"closeBtn"}),["stop"]))},t[17]||(t[17]=[i.createElementVNode("span",null,"",-1)]))):i.createCommentVNode("",!0),n.arrowBtn&&s.multiple?(i.openBlock(),i.createElementBlock("div",{key:3,class:"arrow arrow-left heimgfont theme-item",onClick:t[10]||(t[10]=i.withModifiers(r=>s.prevNextHandle(!1,"arrow-btn"),["stop"]))},t[18]||(t[18]=[i.createElementVNode("span",null,"",-1)]))):i.createCommentVNode("",!0),n.arrowBtn&&s.multiple?(i.openBlock(),i.createElementBlock("div",{key:4,class:"arrow arrow-right heimgfont theme-item",onClick:t[11]||(t[11]=i.withModifiers(r=>s.prevNextHandle(!0,"arrow-btn"),["stop"]))},t[19]||(t[19]=[i.createElementVNode("span",null,"",-1)]))):i.createCommentVNode("",!0),i.createElementVNode("div",L,[i.createVNode(i.Transition,{name:"fade"},{default:i.withCtx(()=>[i.withDirectives(i.createElementVNode("div",S,[i.createElementVNode("span",E,[i.createElementVNode("span",null,i.toDisplayString(n.imgRotate)+"°",1)]),i.withDirectives(i.createElementVNode("input",{class:"hevue-custom-range theme-item","onUpdate:modelValue":t[12]||(t[12]=r=>n.imgRotate=r),type:"range",id:"vol",min:"0",max:"360",orient:"vertical"},null,512),[[i.vModelText,n.imgRotate,void 0,{number:!0}]])],512),[[i.vShow,n.showHevueImgRotate]])]),_:1}),n.controlBar.length?(i.openBlock(),i.createElementBlock("div",{key:0,onClick:t[13]||(t[13]=i.withModifiers(()=>{},["stop"])),class:"he-control-bar theme-item"},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(s.controlbarShowItems,(r,a)=>i.withDirectives((i.openBlock(),i.createElementBlock("div",{class:"he-control-btn heimgfont",key:a,onClick:i.withModifiers(m=>r.handle(),["stop"]),innerHTML:r.icon,title:n.controlbarI18n[n.locale][r.title]},null,8,F)),[[i.vShow,r.show()]])),128))])):i.createCommentVNode("",!0),n.thumbnail&&s.multiple?(i.openBlock(),i.createElementBlock("div",R,[i.createElementVNode("div",{class:"he-imglist",style:i.normalizeStyle({left:s.getThumbLeft()+"px"})},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.imgList,(r,a)=>(i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["he-img-item",{active:a==n.imgIndex}]),key:a,onClick:m=>s.toogleImg(a,"thumb")},[i.createElementVNode("img",{src:r,class:"he-img-item-img",onContextmenu:t[14]||(t[14]=(...m)=>s.imgContextMenu&&s.imgContextMenu(...m))},null,40,D)],10,T))),128))],4)])):i.createCommentVNode("",!0),n.controlBar.length&&s.multiple?(i.openBlock(),i.createElementBlock("div",H,[i.createElementVNode("span",null,i.toDisplayString(n.imgIndex+1)+" / "+i.toDisplayString(n.imgList.length),1)])):i.createCommentVNode("",!0)]),i.createVNode(i.Transition,{name:"fade"},{default:i.withCtx(()=>[i.withDirectives(i.createElementVNode("div",V,[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.shortcutList,r=>(i.openBlock(),i.createElementBlock("div",{class:"hevue-img-help-item",key:r.keyName},[i.createElementVNode("div",z,i.toDisplayString(r.keyName)+"：",1),i.createElementVNode("div",O,i.toDisplayString(n.shortI18n[n.locale][r.desc]),1)]))),128))],512),[[i.vShow,n.showHevueImgHelp]])]),_:1})],2),(i.openBlock(),i.createElementBlock("svg",P,t[20]||(t[20]=[i.createStaticVNode('<filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" data-v-b64ef79b><feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" data-v-b64ef79b></feTurbulence><feComponentTransfer in="turbulence" result="mapped" data-v-b64ef79b><feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" data-v-b64ef79b></feFuncR><feFuncG type="gamma" amplitude="0" exponent="1" offset="0" data-v-b64ef79b></feFuncG><feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" data-v-b64ef79b></feFuncB></feComponentTransfer><feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" data-v-b64ef79b></feGaussianBlur><feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight" data-v-b64ef79b><fePointLight x="-200" y="-200" z="300" data-v-b64ef79b></fePointLight></feSpecularLighting><feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" data-v-b64ef79b></feComposite><feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" data-v-b64ef79b></feDisplacementMap></filter>',1)])))],544)):i.createCommentVNode("",!0)}const Y=I(v,[["render",X],["__scopeId","data-v-b64ef79b"]]);let f={};function k(e){typeof e=="string"?e={imgList:[e]}:Array.isArray(e)&&(e={imgList:e}),Object.keys(f).forEach(s=>{e[s]===void 0&&(e[s]=f[s])});const t=document.getElementById("hevue-img-preview-container");t&&t.remove();const o=document.createElement("div");o.id="hevue-img-preview-container",o.style.zIndex=e.zIndex||"9999",document.body.appendChild(o);const n=i.createApp(Y).mount(o);return Object.keys(e).map(s=>{n[s]=e[s]}),n.show(),n}const A={install(e,t={}){f=t,e.config.globalProperties.$hevueImgPreview=k}};d.default=A,d.previewImages=k,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});