vue-magic-zoom
Version:
🔎 Easy to use image zoom lens library for vue
4 lines (3 loc) • 4.54 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".magic-zoom[data-v-cc7f1ff0]{position:relative;width:100%;height:100%;overflow:hidden}.magic-zoom-lens[data-v-cc7f1ff0]{transition:opacity .25s ease-in-out;pointer-events:none;position:absolute;z-index:1;isolation:isolate;width:var(--5b91658a);height:var(--5b91658a);background:black;transform:translate(-50%,-50%);opacity:var(--37c88807);top:var(--56759296);left:var(--22d73492);overflow:hidden;border:2px solid white}.magic-zoom-image[data-v-cc7f1ff0]{width:var(--13aa8cc2);height:var(--47d811ab);aspect-ratio:var(--ed2d16e2);object-fit:var(--cd9d0be6);background:black;cursor:var(--403593da);overflow:hidden}.magic-zoom-lens-box[data-v-cc7f1ff0]{transform:translate(50%,50%);width:var(--5b91658a);height:var(--5b91658a)}.magic-zoom-lens-image[data-v-cc7f1ff0]{position:fixed;width:var(--7b8734bd);height:var(--323b28a4);aspect-ratio:var(--ed2d16e2);object-fit:var(--cd9d0be6);overflow:hidden;display:inline;transform:translate(var(--3c3e42c0),var(--48d73841))}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VueMagicZoom={},o.Vue))})(this,function(o,e){"use strict";var m=document.createElement("style");m.textContent=`.magic-zoom[data-v-cc7f1ff0]{position:relative;width:100%;height:100%;overflow:hidden}.magic-zoom-lens[data-v-cc7f1ff0]{transition:opacity .25s ease-in-out;pointer-events:none;position:absolute;z-index:1;isolation:isolate;width:var(--5b91658a);height:var(--5b91658a);background:black;transform:translate(-50%,-50%);opacity:var(--37c88807);top:var(--56759296);left:var(--22d73492);overflow:hidden;border:2px solid white}.magic-zoom-image[data-v-cc7f1ff0]{width:var(--13aa8cc2);height:var(--47d811ab);aspect-ratio:var(--ed2d16e2);object-fit:var(--cd9d0be6);background:black;cursor:var(--403593da);overflow:hidden}.magic-zoom-lens-box[data-v-cc7f1ff0]{transform:translate(50%,50%);width:var(--5b91658a);height:var(--5b91658a)}.magic-zoom-lens-image[data-v-cc7f1ff0]{position:fixed;width:var(--7b8734bd);height:var(--323b28a4);aspect-ratio:var(--ed2d16e2);object-fit:var(--cd9d0be6);overflow:hidden;display:inline;transform:translate(var(--3c3e42c0),var(--48d73841))}
`,document.head.appendChild(m);const b={class:"magic-zoom"},p={class:"magic-zoom-lens"},y={class:"magic-zoom-lens-box"},x=["src"],z=["alt","src"],w=e.defineComponent({__name:"MagicZoom",props:{src:null,zoomScale:{default:4},aspectRatio:{default:16/9},lensSize:{default:200},modifier:{default:""},width:{default:"100%"},height:{default:"100%"},alt:null,fit:{default:"initial"}},emits:["change:lens"],setup(t,{emit:s}){const c=t;e.useCssVars(n=>({"5b91658a":t.lensSize+"px","37c88807":e.unref(M),56759296:r.value+"px","22d73492":l.value+"px","13aa8cc2":t.width,"47d811ab":t.height,ed2d16e2:t.aspectRatio,cd9d0be6:t.fit,"403593da":e.unref(k),"7b8734bd":u.value*t.zoomScale+"px","323b28a4":v.value*t.zoomScale+"px","3c3e42c0":-(l.value*t.zoomScale)+"px","48d73841":-(r.value*t.zoomScale)+"px"}));const a=e.ref(!1),i=e.ref(!1),u=e.ref(0),v=e.ref(0),d=e.ref(),l=e.ref(0),r=e.ref(0),f=e.computed(()=>c.modifier?a.value&&i.value:a.value);e.watchEffect(()=>{s("change:lens",f.value)});const M=e.computed(()=>f.value?1:0),k=e.computed(()=>f.value?"zoom-in":"default");function E(n){l.value=n.offsetX,r.value=n.offsetY}function S(){a.value=!0}function L(){a.value=!1}async function V(){d.value&&(v.value=d.value.clientHeight,u.value=d.value.clientWidth)}function g(n){i.value=c.modifier===n.code}function h(){i.value=!1}return e.onMounted(()=>{document.addEventListener("keydown",g),document.addEventListener("keyup",h)}),e.onUnmounted(()=>{document.removeEventListener("keydown",g),document.removeEventListener("keyup",h)}),(n,j)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",p,[e.createElementVNode("div",y,[e.createElementVNode("img",{class:"magic-zoom-lens-image",src:t.src},null,8,x)])]),e.createElementVNode("img",{ref_key:"originalImage",ref:d,class:"magic-zoom-image",alt:t.alt,src:t.src,onMousemove:E,onMouseover:S,onMouseout:L,onLoad:V},null,40,z)]))}}),I="",_=((t,s)=>{const c=t.__vccOpts||t;for(const[a,i]of s)c[a]=i;return c})(w,[["__scopeId","data-v-cc7f1ff0"]]);o.MagicZoom=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});