auto-screen-view/dist/es/index.es.js

大屏适配

import { defineComponent, computed, ref, onMounted, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, renderSlot } from "vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "comp",
  props: {
    originWidth: { default: 1920 },
    originHeight: { default: 1080 },
    fullScreen: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const originRatio = computed(() => {
      return props.originWidth / props.originHeight;
    });
    const containerRef = ref();
    const style = computed(() => {
      return {
        width: `${props.originWidth}px`,
        height: `${props.originHeight}px`
      };
    });
    const retryResize = () => {
      var _a, _b;
      const width = window.innerWidth;
      const height = window.innerHeight;
      const ratio = width / height;
      if (ratio > originRatio.value) {
        const scale = height / props.originHeight;
        (_a = containerRef.value) == null ? void 0 : _a.style.setProperty(
          "--auto-screen-scale",
          scale.toString()
        );
      } else {
        const scale = width / props.originWidth;
        console.log(scale);
        (_b = containerRef.value) == null ? void 0 : _b.style.setProperty(
          "--auto-screen-scale",
          scale.toString()
        );
      }
    };
    const changeFullScreen = () => {
      if (props.fullScreen) {
        document.documentElement.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    };
    onMounted(() => {
      retryResize();
      window.addEventListener("resize", retryResize);
    });
    watch(
      () => [props.originHeight, props.originWidth],
      () => {
        retryResize();
      }
    );
    watch(
      () => props.fullScreen,
      () => {
        changeFullScreen();
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "auto-screen-view-container",
        ref_key: "containerRef",
        ref: containerRef
      }, [
        createElementVNode("div", {
          style: normalizeStyle(style.value),
          class: "auto-screen-view-content"
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 4)
      ], 512);
    };
  }
});
const install = (vue) => {
  vue.component("AutoScreen", _sfc_main);
};
const index = Object.assign(_sfc_main, {
  install
});
export {
  _sfc_main as AutoScreen,
  index as default
};
//# sourceMappingURL=index.es.js.map