今天小编给大家分享一下vue3 hook如何重构DataV的全屏容器组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
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>
自定义一个hook,导出一个autoBindRef绑定ref
useAutoResize.ts
import { ref } from 'vue'; export function useAutoResize() { let domRef = ref<HTMLElement | null>(); function autoBindRef() { } return { autoBindRef } }
确保先获取到dom元素,逻辑才可以继续往下走。
创建一个函数,用于检测获取正确的dom元素
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 }
自动绑定组件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时期,dom都已挂载完毕,故需在此周期获取dom元素。
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) }
获取到dom后,将获取到的设备屏幕分辨率宽高设置给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})`; }
当dom元素改变/窗口大小变化时,触发这个函数。
需要同时对dom元素和窗口大小的变化监听
dom元素监听
这里我们使用MutationObserver
来对dom元素的变化来监听
function observerDomResize(dom: HTMLElement, callback: () => void) { const observer = new MutationObserver(callback); observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true, }) return observer }
在mounted周期内设置监听
export function useAutoResize() { const handleInitDom = () => { initDom(domRef.value) } onMounted(() => { initDom(domRef.value) initConifg(domRef.value) observerDomResize(domRef.value, handleInitDom) window.removeEventListener('resize', handleInitDom); }) }
但是如果我们直接这样写,他就会频繁调用handleInitDom函数,造成性能浪费,所以使用防抖函数先包装一下事件处理函数handleInitDom再调用。
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); } ); }) }
监听了事件,那么在组件卸载时就要清除它
onUnmounted(() => { domSizeEffectDisposer.forEach(disposer => disposer()) })
以上就是“vue3 hook如何重构DataV的全屏容器组件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。