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

Automatic adjustment of large screen display

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.js
var src_exports = {};
__export(src_exports, {
  useDrawToDom: () => useDrawToDom,
  useDrawToVue2: () => useDrawToVue2,
  useDrawToVue3: () => useDrawToVue3
});
module.exports = __toCommonJS(src_exports);
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);
      }
    }
  };
}