Home > Article > Web Front-end > How vue3 hook reconstructs DataV’s full-screen container component
fullScreenContainer.vue
<template> <div id="dv-full-screen-container" :ref="autoBindRef"> <slot></slot> </div> </template> <script setup lang="ts"> import { useAutoResize } from '@/hooks/useAutoResize' const { autoBindRef } = useAutoResize() </script>
Customize a hook and export an autoBindRef binding ref
useAutoResize.ts
import { ref } from 'vue'; export function useAutoResize() { let domRef = ref<HTMLElement | null>(); function autoBindRef() { } return { autoBindRef } }
Make sure to get the dom element first before the logic can continue.
Create a function to detect and obtain the correct dom element
function getRefDom(ref: HTMLElement | ComponentPublicInstance): HTMLElement | null { // ref指向dom,则返回ref // isElement检查指定的值是否为DOM元素 if (isElement(ref)) { return ref as HTMLElement } // 若ref指向组件实例,通过$el获取dom元素 if (isElement((ref as ComponentPublicInstance).$el)) { return (ref as ComponentPublicInstance).$el } return null }
Automatically bind the component domRef
export function useAutoResize() { let domRef = ref<HTMLElement | null>(); const autoBindRef = once((ref: HTMLElement | ComponentPublicInstance) => { const dom = getRefDom(ref); if(!dom) { console.warn("绑定组件domRef失败!") return; } domRef.value = dom; }) return { autoBindRef } }
export function useAutoResize() { onMounted(() => { initDom(domRef.value) initConifg(domRef.value) }) }
mounted period, The DOM has been mounted, so the DOM elements need to be obtained during this cycle.
function initDom(dom:HTMLElement) { const { clientWidth = 0, clientHeight = 0 } = dom || {} if(!dom) { console.warn("获取dom节点失败,组件渲染可能异常!") return } else if(!clientWidth || !clientHeight) { console.warn("组件宽度或高度为0px,可能会出现渲染异常!") return } // 设置缩放比例 if(typeof setAppSacle === 'function') setAppScale(dom) }
After obtaining the dom, set the obtained device screen resolution width and height to the dom.
function initConfig(dom:HTMLElement) { const { width, height } = screen || {} dom.style.width = `${width}px`; dom.style.height = `${height}px`; }
function setAppScale(dom:HTMLElement){ const currentWidth = document.body.clientWidth; const { width } = screen || {}; dom.style.transform = `scale(${currentWidth / width})`; }
This function is triggered when the dom element changes/the window size changes.
Need to monitor changes in dom elements and window sizes at the same time
Dom element monitoring
Here we use MutationObserver
To monitor changes in dom elements
function observerDomResize(dom: HTMLElement, callback: () => void) { const observer = new MutationObserver(callback); observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true, }) return observer }
Set monitoring during the mounted cycle
export function useAutoResize() { const handleInitDom = () => { initDom(domRef.value) } onMounted(() => { initDom(domRef.value) initConifg(domRef.value) observerDomResize(domRef.value, handleInitDom) window.removeEventListener('resize', handleInitDom); }) }
But if we write it directly like this, it will frequently call the handleInitDom function, causing performance It's wasteful, so use the anti-shake function to wrap the event processing function handleInitDom before calling it.
export function useAutoResize() { const domSizeEffectDisposer: (() => void)[] = []; const debounceInitDomFun = debounce(handleInitDom, 300) onMounted(() => { initDom(domRef.value) initConifg(domRef.value) observerDomResize(domRef.value, debounceInitDomFun) window.removeEventListener('resize', debounceInitDomFun); domSizeEffectDisposer.push( () => { if (!observer) return observer.disconnect(); observer.takeRecords(); observer = null; }, () => { window.removeEventListener('resize', debounceInitDomFun); } ); }) }
If you listen to the event, you must clear it when the component is uninstalled
onUnmounted(() => { domSizeEffectDisposer.forEach(disposer => disposer()) })
The above is the detailed content of How vue3 hook reconstructs DataV’s full-screen container component. For more information, please follow other related articles on the PHP Chinese website!