今天小编给大家分享一下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的全屏容器组件”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
