vue-magic-zoom
Version:
🔎 Easy to use image zoom lens library for vue
95 lines (94 loc) • 4 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)}})();
import { defineComponent as L, useCssVars as S, unref as x, ref as o, computed as f, watchEffect as b, onMounted as w, onUnmounted as I, openBlock as p, createElementBlock as H, createElementVNode as l } from "vue";
const Z = { class: "magic-zoom" }, B = { class: "magic-zoom-lens" }, C = { class: "magic-zoom-lens-box" }, K = ["src"], R = ["alt", "src"], U = /* @__PURE__ */ L({
__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(e, { emit: i }) {
const a = e;
S((n) => ({
"5b91658a": e.lensSize + "px",
"37c88807": x(z),
56759296: d.value + "px",
"22d73492": u.value + "px",
"13aa8cc2": e.width,
"47d811ab": e.height,
ed2d16e2: e.aspectRatio,
cd9d0be6: e.fit,
"403593da": x(y),
"7b8734bd": v.value * e.zoomScale + "px",
"323b28a4": r.value * e.zoomScale + "px",
"3c3e42c0": -(u.value * e.zoomScale) + "px",
"48d73841": -(d.value * e.zoomScale) + "px"
}));
const t = o(!1), c = o(!1), v = o(0), r = o(0), s = o(), u = o(0), d = o(0), m = f(
() => a.modifier ? t.value && c.value : t.value
);
b(() => {
i("change:lens", m.value);
});
const z = f(() => m.value ? 1 : 0), y = f(() => m.value ? "zoom-in" : "default");
function M(n) {
u.value = n.offsetX, d.value = n.offsetY;
}
function _() {
t.value = !0;
}
function k() {
t.value = !1;
}
async function E() {
s.value && (r.value = s.value.clientHeight, v.value = s.value.clientWidth);
}
function g(n) {
c.value = a.modifier === n.code;
}
function h() {
c.value = !1;
}
return w(() => {
document.addEventListener("keydown", g), document.addEventListener("keyup", h);
}), I(() => {
document.removeEventListener("keydown", g), document.removeEventListener("keyup", h);
}), (n, W) => (p(), H("div", Z, [
l("div", B, [
l("div", C, [
l("img", {
class: "magic-zoom-lens-image",
src: e.src
}, null, 8, K)
])
]),
l("img", {
ref_key: "originalImage",
ref: s,
class: "magic-zoom-image",
alt: e.alt,
src: e.src,
onMousemove: M,
onMouseover: _,
onMouseout: k,
onLoad: E
}, null, 40, R)
]));
}
});
const V = (e, i) => {
const a = e.__vccOpts || e;
for (const [t, c] of i)
a[t] = c;
return a;
}, Y = /* @__PURE__ */ V(U, [["__scopeId", "data-v-cc7f1ff0"]]);
export {
Y as MagicZoom
};