vue3项目大屏适配方案（scale)及vue-tv-focusable库使用

一. 适配方案代码(scale)

公共代码

export const useAdjustScale = () => {// * 指向最外层容器const pageRef = ref();// * 默认缩放值const scale = {width: '1',height: '1',};// * 需保持的比例（默认1.77778）
const designWidth = 1920
const designHeight = 1080const baseProportion = parseFloat((designWidth / designHeight).toFixed(5));const adjustScale = () => {// 当前宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));if (pageRef.value) {if (currentRate > baseProportion) {// 表示更宽scale.width = ((window.innerHeight * baseProportion) / designWidth).toFixed(5);scale.height = (window.innerHeight / designHeight).toFixed(5);pageRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;console.log(scale.width, scale.height, 'moreWidth');} else {// 表示更高scale.height = (window.innerWidth / baseProportion / designHeight).toFixed(5);scale.width = (window.innerWidth / designWidth).toFixed(5);pageRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;}}};onMountedOrActivated(() => adjustScale());useWindowSizeFn(() => adjustScale());return { pageRef, adjustScale };
};

onMountedOrActivated

import { nextTick, onMounted, onActivated } from 'vue';export function onMountedOrActivated(hook: Fn) {let mounted: boolean;onMounted(() => {hook();nextTick(() => {mounted = true;});});onActivated(() => {if (mounted) {hook();}});
}

useWindowSizeFn

import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core';interface WindowSizeOptions {once?: boolean;immediate?: boolean;listenerOptions?: AddEventListenerOptions | boolean;
}export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {let handler = () => {console.log('resizeHander');try {fn();} catch (error) {console.error(`${new Date().toLocaleTimeString()}🔥 -> useWindowSizeFn -> error:`, error);}};const handleSize = useDebounceFn(handler, wait);handler = handleSize;const start = () => {if (options && options.immediate) {handler();}window.addEventListener('resize', handler);};const stop = () => {window.removeEventListener('resize', handler);};tryOnMounted(() => {start();});tryOnUnmounted(() => {stop();});return [start, stop];
}

使用核心举例

  <div id="dashboard" ref="pageRef"></div>
// * 适配处理const { pageRef } = useAdjustScale();

二.vue-tv-focusable

用途：主要用于大屏项目在tv中显示时，利用遥控器控制dom元素的聚焦
使用示例

<divclass="secure"ref="secureRef"v-focusable="true"@up="secureFocus('up')"@right="secureFocus('right')"@click="secureClick"></div>

 const secureFocus = (e) => {if (e == 'up') {proxy.$tv.requestFocus(introduceRef.value);} else if (e == 'right') {proxy.$tv.requestFocus(qualityRef.value);}};

 import { getCurrentInstance } from 'vue';const { proxy } = getCurrentInstance();const introduceRef = ref<HTMLFrameElement>();const qualityRef = ref<HTMLFrameElement>();

详细使用方法可参考vue-tv-focusable