vue-auto-scale/dist/VueAutoScale.es.js

vue大屏缩放组件

import { defineComponent as I, mergeDefaults as B, ref as f, computed as P, watch as S, onMounted as R, onBeforeUnmount as _, createElementBlock as z, openBlock as k, normalizeStyle as C, renderSlot as N, nextTick as A } from "vue";
function H(u, c) {
  let s = null;
  return function() {
    s && clearTimeout(s);
    const g = typeof c == "function" ? c() : c;
    s = setTimeout(() => {
      s = null, u.call(this);
    }, g);
  };
}
const V = {
  width: 1920,
  height: 1080,
  scaleType: 1,
  delay: 100,
  reverseScalingIds: null,
  parent: !1
}, W = "absolute", q = /* @__PURE__ */ I({
  name: "VueAutoScale",
  __name: "index",
  props: /* @__PURE__ */ B({
    width: {},
    height: {},
    scaleType: {},
    delay: {},
    reverseScalingIds: {},
    parent: { type: Boolean }
  }, V),
  emits: ["change"],
  setup(u, { emit: c }) {
    const s = f(null), e = u, g = c, w = f(""), p = f(""), d = f(""), x = P(() => {
      const t = Number.isFinite(e.width) ? `${e.width}px` : `${e.width}`, r = Number.isFinite(e.height) ? `${e.height}px` : `${e.height}`;
      return {
        position: W,
        transformOrigin: "0px 0px",
        left: p.value,
        transform: w.value,
        width: t,
        height: r,
        top: d.value
      };
    });
    function $() {
      var o;
      const t = e.width, r = e.height;
      if (t <= 0 || r <= 0)
        return [1, 1];
      let n = window.innerWidth, i = window.innerHeight;
      if (e.parent && ((o = s.value) != null && o.parentElement)) {
        const { width: l, height: a } = s.value.parentElement.getBoundingClientRect();
        n = l, i = a;
      }
      if (n <= 0 || i <= 0)
        return [1, 1];
      if (e.scaleType === 1)
        return [
          `${n / t},${i / r}`,
          `${t / n},${r / i}`
        ];
      if (e.scaleType === 2) {
        const l = i / r, a = r / i, h = n / t, E = t / n;
        return h < l ? [h, E] : [l, a];
      }
      return e.scaleType === 3 ? [n / t, t / n] : e.scaleType === 4 ? [i / r, r / i] : [1, 1];
    }
    function b(t, r) {
      if (!e.reverseScalingIds)
        return;
      let n = [];
      typeof e.reverseScalingIds == "string" ? n = [e.reverseScalingIds] : n = e.reverseScalingIds, n.forEach((i) => {
        const o = document.querySelector(i);
        if (!o)
          return;
        let l = 1, a = 1;
        if (typeof t == "number")
          l = e.width * t, a = e.height * t;
        else if (typeof t == "string" && t.includes(",")) {
          const h = t.split(",");
          l = e.width * Number(h[0]), a = e.height * Number(h[1]);
        }
        o.style.setProperty("width", `${l}px`), o.style.setProperty("height", `${a}px`), o.style.setProperty("transform", `scale(${r})`), o.style.setProperty("transform-origin", "0 0");
      });
    }
    function T() {
      if (!e.reverseScalingIds)
        return;
      (typeof e.reverseScalingIds == "string" ? [e.reverseScalingIds] : e.reverseScalingIds).forEach((r) => {
        const n = document.querySelector(r);
        n && (n.style.removeProperty("width"), n.style.removeProperty("height"), n.style.removeProperty("transform"), n.style.removeProperty("transform-origin"));
      });
    }
    function m() {
      const [t, r] = $();
      w.value = `scale(${t})`;
      const n = () => {
        g("change", t, r), b(t, r);
      };
      e.scaleType === 2 || e.scaleType === 4 ? A(() => {
        var l;
        if (!((l = s.value) != null && l.parentElement)) {
          d.value = "0", p.value = "0", n();
          return;
        }
        const i = s.value.parentElement.getBoundingClientRect(), o = s.value.getBoundingClientRect();
        d.value = `${(i.height - o.height) / 2}px`, p.value = `${(i.width - o.width) / 2}px`, n();
      }) : (d.value = "0", p.value = "0", n());
    }
    const v = H(() => m(), () => e.delay);
    S(
      () => ({
        width: e.width,
        height: e.height,
        scaleType: e.scaleType,
        reverseScalingIds: e.reverseScalingIds,
        parent: e.parent
      }),
      () => {
        m();
      },
      { deep: !0 }
    );
    const y = new ResizeObserver(() => {
      v();
    });
    return S(
      () => [e.parent, s.value],
      () => {
        var t;
        y.disconnect(), e.parent && ((t = s.value) != null && t.parentElement) && y.observe(s.value.parentElement);
      },
      { flush: "post" }
    ), R(() => {
      m(), window.addEventListener("resize", v);
    }), _(() => {
      window.removeEventListener("resize", v), y.disconnect(), T();
    }), (t, r) => (k(), z("div", {
      ref_key: "autoScaleBox",
      ref: s,
      class: "auto-scale-box",
      style: C(x.value)
    }, [
      N(t.$slots, "default")
    ], 4));
  }
}), D = [q], F = (u) => {
  D.forEach((c) => {
    u.component(c.name, c);
  });
}, M = { install: F };
export {
  q as VueAutoScale,
  M as default
};
//# sourceMappingURL=VueAutoScale.es.js.map