auto-screen-view
Version:
大屏适配
100 lines (99 loc) • 3.69 kB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.AutoScreen = {}, global.Vue));
})(this, function(exports2, vue) {
"use strict";
var __vite_style__ = document.createElement("style");
__vite_style__.textContent = "._container_t33ve_1 {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n padding: 0;\n border: none;\n z-index: 99999999;\n }\n \n ._content_t33ve_12 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(var(--auto-screen-scale, 1));\n background-color: rgb(248, 248, 248);\n }/*$vite$:1*/";
document.head.appendChild(__vite_style__);
const container = "_container_t33ve_1";
const content = "_content_t33ve_12";
const styles = {
container,
content
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
originWidth: { default: 1920 },
originHeight: { default: 1080 },
fullScreen: { type: Boolean, default: false }
},
setup(__props) {
const props = __props;
const originRatio = vue.computed(() => {
return props.originWidth / props.originHeight;
});
const containerRef = vue.ref();
const style = vue.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;
(_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();
}
};
vue.onMounted(() => {
retryResize();
window.addEventListener("resize", retryResize);
});
vue.watch(
() => [props.originHeight, props.originWidth],
() => {
retryResize();
}
);
vue.watch(
() => props.fullScreen,
() => {
changeFullScreen();
}
);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(styles)["container"]),
ref_key: "containerRef",
ref: containerRef
}, [
vue.createElementVNode("div", {
style: vue.normalizeStyle(style.value),
class: vue.normalizeClass(vue.unref(styles)["content"])
}, null, 6)
], 2);
};
}
});
const install = (vue2) => {
vue2.component("AutoScreen", _sfc_main);
};
const index = Object.assign(_sfc_main, {
install
});
exports2.AutoScreen = _sfc_main;
exports2.default = index;
Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
});
//# sourceMappingURL=index.umd.js.map