@yangtaowei/b-s-adaption/src/index.js

Automatic adjustment of large screen display

let scale = {
	width: '1',
	height: '1',
};
let 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 };