@yangtaowei/b-s-adaption/dist/index.esm.js

Automatic adjustment of large screen display

// src/index.js
var scale = {
  width: "1",
  height: "1"
};
var baseContainerStyle = {
  width: "1920px",
  height: "1080px",
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  transformOrigin: "left top"
};
function useDrawToDom(appDomId, options = { baseWidth: 1920, baseHeight: 1080, baseProportion: null }) {
  let drawTiming = null;
  const baseWidth = options.baseWidth;
  const baseHeight = options.baseHeight;
  const baseProportion = options.baseProportion || parseFloat((baseWidth / baseHeight).toFixed(5));
  const calcRate = () => {
    const appDom = document.getElementById(appDomId);
    if (!appDom)
      return;
    Object.assign(appDom.style, baseContainerStyle);
    const currentRate = parseFloat((window.document.body.clientWidth / window.document.body.clientHeight).toFixed(5));
    if (appDom) {
      if (currentRate > baseProportion) {
        scale.width = (window.document.body.clientHeight * baseProportion / baseWidth).toFixed(5);
        scale.height = (window.document.body.clientHeight / baseHeight).toFixed(5);
        appDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
      } else {
        scale.height = (window.document.body.clientWidth / baseProportion / baseHeight).toFixed(5);
        scale.width = (window.document.body.clientWidth / baseWidth).toFixed(5);
        appDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
      }
    }
  };
  const resize = () => {
    clearTimeout(drawTiming);
    drawTiming = null;
    drawTiming = setTimeout(calcRate, 200);
  };
  window.onload = function() {
    calcRate();
    window.addEventListener("resize", resize, false);
  };
  window.onbeforeunload = function() {
    window.removeEventListener("resize", resize, false);
  };
}
function useDrawToVue3(appRef, options = { baseWidth: 1920, baseHeight: 1080, baseProportion: null }) {
  let drawTiming = null;
  const baseWidth = options.baseWidth;
  const baseHeight = options.baseHeight;
  const baseProportion = options.baseProportion || parseFloat((baseWidth / baseHeight).toFixed(5));
  const calcRate = () => {
    if (!appRef.value)
      return;
    Object.assign(appRef.value.style, baseContainerStyle);
    const currentRate = parseFloat((window.document.body.clientWidth / window.document.body.clientHeight).toFixed(5));
    if (appRef.value) {
      if (currentRate > baseProportion) {
        scale.width = (window.document.body.clientHeight * baseProportion / baseWidth).toFixed(5);
        scale.height = (window.document.body.clientHeight / baseHeight).toFixed(5);
        console.log(1, scale);
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
      } else {
        scale.height = (window.document.body.clientWidth / baseProportion / baseHeight).toFixed(5);
        scale.width = (window.document.body.clientWidth / baseWidth).toFixed(5);
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
      }
    }
  };
  const resize = () => {
    clearTimeout(drawTiming);
    drawTiming = null;
    drawTiming = setTimeout(calcRate, 200);
  };
  return {
    calcRate,
    resize
  };
}
function useDrawToVue2(appRefName, options = { baseWidth: 1920, baseHeight: 1080, baseProportion: null }) {
  const baseWidth = options.baseWidth;
  const baseHeight = options.baseHeight;
  const baseProportion = options.baseProportion || parseFloat((baseWidth / baseHeight).toFixed(5));
  return {
    data() {
      return {
        drawTiming: null
      };
    },
    mounted() {
      this.calcRate();
      window.addEventListener("resize", this.resize, false);
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.resize, false);
    },
    methods: {
      calcRate() {
        const appRef = this.$refs[appRefName];
        if (!appRef)
          return;
        Object.assign(appRef.style, baseContainerStyle);
        const currentRate = parseFloat(
          (window.document.body.clientWidth / window.document.body.clientHeight).toFixed(5)
        );
        if (appRef) {
          if (currentRate > baseProportion) {
            scale.width = (window.document.body.clientHeight * baseProportion / baseWidth).toFixed(5);
            scale.height = (window.document.body.clientHeight / baseHeight).toFixed(5);
            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
          } else {
            scale.height = (window.document.body.clientWidth / baseProportion / baseHeight).toFixed(5);
            scale.width = (window.document.body.clientWidth / baseWidth).toFixed(5);
            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
          }
        }
      },
      resize() {
        clearTimeout(this.drawTiming);
        this.drawTiming = setTimeout(this.calcRate, 200);
      }
    }
  };
}
export {
  useDrawToDom,
  useDrawToVue2,
  useDrawToVue3
};