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

vue大屏缩放组件

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