vue-mouse-glow/vue-mouse-glow.js

Vue移动鼠标光晕效果

import { ref as g, onMounted as v, onUnmounted as p, createElementBlock as m, openBlock as d, createElementVNode as i, normalizeStyle as s, normalizeClass as r, renderSlot as c } from "vue";
const u = `
radial-gradient(var(--glow-size) var(--glow-size) at calc(var(--glow-x, -99999px) - var(--glow-left, 0px))
calc(var(--glow-y, -99999px) - var(--glow-top, 0px)), #0e59c2 10%, transparent 50%)
`, w = /* @__PURE__ */ Object.assign({
  name: "Glow"
}, {
  __name: "Glow",
  props: {
    className: {
      type: String,
      default: ""
    },
    style: {
      type: Object,
      default: () => ({})
    },
    color: {
      type: String,
      default: "#0e59c2"
    },
    luminance: {
      type: Number,
      default: 0.3
    },
    debug: {
      type: Boolean,
      default: !1
    }
  },
  setup(t) {
    const e = g(null), n = () => {
      e.value && (e.value.style.setProperty("--glow-top", `${e.value.offsetTop}px`), e.value.style.setProperty("--glow-left", `${e.value.offsetLeft}px`));
    };
    return v(() => {
      var a;
      n();
      const o = new ResizeObserver(() => {
        requestAnimationFrame(() => {
          n();
        });
      }), l = (a = e.value) == null ? void 0 : a.closest(".glow-capture");
      l && o.observe(l), p(() => {
        o.disconnect();
      });
    }), (o, l) => (d(), m("div", {
      ref_key: "element",
      ref: e,
      class: "glow",
      style: { display: "grid" }
    }, [
      i("div", {
        class: r(["glow-content", t.className]),
        style: s({
          ...t.style,
          gridArea: "1/1/1/1",
          "--glow-color": t.color
        })
      }, [
        c(o.$slots, "default")
      ], 6),
      i("div", {
        class: r(["glow-mask", t.className]),
        glow: "true",
        style: s({
          ...t.style,
          "--glow-color": t.color,
          gridArea: "1/1/1/1",
          pointerEvents: "none",
          mask: t.debug ? void 0 : u,
          WebkitMask: t.debug ? void 0 : u,
          background: t.color,
          opacity: t.luminance
        })
      }, [
        c(o.$slots, "default")
      ], 6)
    ], 512));
  }
}), b = /* @__PURE__ */ Object.assign({
  name: "GlowCapture"
}, {
  __name: "GlowCapture",
  props: {
    className: {
      type: String,
      default: ""
    },
    size: {
      type: Number,
      default: 400
    }
  },
  setup(t) {
    const e = g(null), n = (l) => {
      l.pointerType === "mouse" && requestAnimationFrame(() => {
        if (e.value) {
          const a = e.value.getBoundingClientRect(), f = l.clientX - a.left, y = l.clientY - a.top;
          e.value.style.setProperty("--glow-x", `${f}px`), e.value.style.setProperty("--glow-y", `${y}px`);
        }
      });
    }, o = () => {
      e.value && (e.value.style.removeProperty("--glow-x"), e.value.style.removeProperty("--glow-y"));
    };
    return (l, a) => (d(), m("div", {
      ref_key: "element",
      ref: e,
      class: r(["glow-capture", t.className]),
      style: s({ position: "relative", "--glow-size": `${t.size}px` }),
      onPointermove: n,
      onPointerleave: o
    }, [
      c(l.$slots, "default")
    ], 38));
  }
}), x = [b, w], k = {
  install(t) {
    x.forEach((e) => {
      console.log(`注册${e.name}`, e), t.component(e.name, e);
    });
  }
};
export {
  w as Glow,
  b as GlowCapture,
  k as default
};