vue3 hook重构DataV的全屏容器组件详解

#vue3 hook重构DataV的全屏容器组件详解| 来源: 网络整理| 查看: 265

目录前言实现创建组件自定义hook文件 1、绑定domRef 2、初始化 2.1、初始化dom 2.2、初始化设备 2.3、设置缩放效果 3、监听/移除事件小结

前言

上一篇我们仔细阅读了DataV的全屏容器组件的源码，首先我们来梳理下它的实现逻辑。

获取该组件dom，获取他的可视宽高获取设备屏幕的分辨率作为该dom的宽高根据当前视口的宽度/屏幕分辨率的宽度为缩放比例对该dom进行缩放监听该dom元素的style元素变化、resize变化，若变化就执行3 组件销毁时，回收监听事件

实现

创建组件

fullScreenContainer.vue

import { useAutoResize } from '@/hooks/useAutoResize' const { autoBindRef } = useAutoResize()

自定义一个hook，导出一个autoBindRef绑定ref

自定义hook文件

useAutoResize.ts

import { ref } from 'vue'; export function useAutoResize() { let domRef = ref(); function autoBindRef() { } return { autoBindRef } }

1、绑定domRef

确保先获取到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(); const autoBindRef = once((ref: HTMLElement | ComponentPublicInstance) => { const dom = getRefDom(ref); if(!dom) { console.warn("绑定组件domRef失败！") return; } domRef.value = dom; }) return { autoBindRef } }

2、初始化 export function useAutoResize() { onMounted(() => { initDom(domRef.value) initConifg(domRef.value) }) }

mounted时期，dom都已挂载完毕，故需在此周期获取dom元素。

2.1、初始化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) }

2.2、初始化设备

获取到dom后，将获取到的设备屏幕分辨率宽高设置给dom。

function initConfig(dom:HTMLElement) { const { width, height } = screen || {} dom.style.width = `${width}px`; dom.style.height = `${height}px`; }

2.3、设置缩放效果 function setAppScale(dom:HTMLElement){ const currentWidth = document.body.clientWidth; const { width } = screen || {}; dom.style.transform = `scale(${currentWidth / width})`; }

当dom元素改变/窗口大小变化时，触发这个函数。

3、监听/移除事件

需要同时对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真的还挺香~

以上就是vue3 hook重构DataV的全屏容器组件详解的详细内容，更多关于vue3 hook重构DataV的资料请关注其它相关文章！

原文地址：https://juejin.cn/post/7219084778346561594

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章