vue-screen-scaler/dist/vue-screen-scaler.es.js

A Vue 3 utility for scaling large screen applications to fit any display

import { ref as a, onMounted as E, onBeforeUnmount as g } from "vue";
const y = 1920, H = 1080, T = (d = {}) => {
  const {
    designWidth: c = y,
    designHeight: r = H,
    fullScreen: m = !1,
    delay: f = 100,
    containerStyle: v = {
      position: "relative",
      transition: "transform 0.3s ease"
    }
  } = d, t = a(null), i = a(1), h = (n, o) => {
    let e = null;
    return (...s) => {
      e && clearTimeout(e), e = setTimeout(() => {
        n(...s), e = null;
      }, o);
    };
  }, u = () => {
    if (!t.value)
      return;
    const n = document.documentElement.clientWidth || document.body.clientWidth, o = document.documentElement.clientHeight || document.body.clientHeight, e = n / c, s = o / r;
    m ? (i.value = (e + s) / 2, t.value.style.transform = `scale(${e}, ${s})`) : (i.value = n / o > c / r ? s : e, t.value.style.transform = `scale(${i.value})`), t.value.style.transformOrigin = "0 0";
  }, l = h(u, f);
  return E(() => {
    t.value && Object.entries(v).forEach(([n, o]) => {
      t.value.style[n] = o;
    }), u(), window.addEventListener("resize", l);
  }), g(() => {
    window.removeEventListener("resize", l);
  }), {
    screenRef: t,
    scale: i,
    resize: l
    // 暴露手动触发缩放的方法
  };
};
export {
  T as useScreenScaler
};