ly-scale-screen/dist/ly-scale-screen.js

vue3大屏自适应组件

import { defineComponent as H, reactive as p, ref as W, onMounted as O, nextTick as v, onUnmounted as $, onActivated as z, h as b } from "vue";
function M(t, l) {
  let o;
  return function(...e) {
    o && clearTimeout(o), o = setTimeout(
      () => {
        typeof t == "function" && t.apply(null, e), clearTimeout(o);
      },
      l > 0 ? l : 100
    );
  };
}
const T = H({
  name: "VScaleScreen",
  props: {
    width: {
      type: [String, Number],
      default: 1920
    },
    height: {
      type: [String, Number],
      default: 1080
    },
    fullScreen: {
      type: Boolean,
      default: !1
    },
    autoScale: {
      type: [Object, Boolean],
      default: !0
    },
    delay: {
      type: Number,
      default: 500
    },
    boxStyle: {
      type: Object,
      default: () => ({})
    },
    wrapperStyle: {
      type: Object,
      default: () => ({})
    },
    bodyOverflowHidden: {
      type: Boolean,
      default: !0
    }
  },
  setup(t, { slots: l }) {
    let o;
    const e = p({
      width: 0,
      height: 0,
      originalWidth: 0,
      originalHeight: 0,
      observer: null
    }), f = {
      box: {
        overflow: "hidden",
        backgroundSize: "100% 100%",
        backgroundColor: "#000",
        width: "100vw",
        height: "100vh"
      },
      wrapper: {
        transitionProperty: "all",
        transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
        transitionDuration: "500ms",
        position: "relative",
        overflow: "hidden",
        zIndex: 100,
        transformOrigin: "left top"
      }
    }, n = W(), g = () => new Promise((i) => {
      v(() => {
        var r, a;
        t.width && t.height ? (e.width = t.width, e.height = t.height) : (e.width = (r = n.value) == null ? void 0 : r.clientWidth, e.height = (a = n.value) == null ? void 0 : a.clientHeight), (!e.originalHeight || !e.originalWidth) && (e.originalWidth = window.screen.width, e.originalHeight = window.screen.height), i();
      });
    });
    function m() {
      t.bodyOverflowHidden && (o = document.body.style.overflow, document.body.style.overflow = "hidden");
    }
    const w = () => {
      e.width && e.height ? (n.value.style.width = `${e.width}px`, n.value.style.height = `${e.height}px`) : (n.value.style.width = `${e.originalWidth}px`, n.value.style.height = `${e.originalHeight}px`);
    }, S = (i) => {
      if (!t.autoScale)
        return;
      const r = n.value.clientWidth, a = n.value.clientHeight, y = document.body.clientWidth, c = document.body.clientHeight;
      n.value.style.transform = `scale(${i},${i})`;
      let d = Math.max((y - r * i) / 2, 0), u = Math.max((c - a * i) / 2, 0);
      typeof t.autoScale == "object" && (!t.autoScale.x && (d = 0), !t.autoScale.y && (u = 0)), n.value.style.margin = `${u}px ${d}px`;
    }, h = () => {
      const i = document.body.clientWidth, r = document.body.clientHeight, a = e.width || e.originalWidth, y = e.height || e.originalHeight, c = i / +a, d = r / +y;
      if (t.fullScreen)
        return n.value.style.transform = `scale(${c},${d})`, !1;
      const u = Math.min(c, d);
      S(u);
    }, s = M(async () => {
      await g(), w(), h();
    }, t.delay), x = () => {
      (e.observer = new MutationObserver(() => {
        s();
      })).observe(n.value, {
        attributes: !0,
        attributeFilter: ["style"],
        attributeOldValue: !0
      });
    };
    return O(() => {
      m(), v(async () => {
        await g(), w(), h(), window.addEventListener("resize", s), x();
      });
    }), $(() => {
      var i;
      window.removeEventListener("resize", s), (i = e.observer) == null || i.disconnect(), t.bodyOverflowHidden && (document.body.style.overflow = o);
    }), z(h), () => {
      var i;
      return b(
        "div",
        {
          className: "v-screen-box",
          style: { ...f.box, ...t.boxStyle }
        },
        [
          b(
            "div",
            {
              className: "screen-wrapper",
              style: { ...f.wrapper, ...t.wrapperStyle },
              ref: n
            },
            (i = l.default) == null ? void 0 : i.call(l)
          )
        ]
      );
    };
  }
});
export {
  T as default
};