vue3?hook重構(gòu)DataV的全屏容器組件詳解
更新時(shí)間：2023年04月07日 14:13:18 作者：叁兩
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前言
上一篇我們仔細(xì)閱讀了DataV的全屏容器組件的源碼，首先我們來(lái)梳理下它的實(shí)現(xiàn)邏輯。
- 獲取該組件dom，獲取他的可視寬高
- 獲取設(shè)備屏幕的分辨率作為該dom的寬高
- 根據(jù)當(dāng)前視口的寬度/屏幕分辨率的寬度為縮放比例對(duì)該dom進(jìn)行縮放
- 監(jiān)聽(tīng)該dom元素的style元素變化、resize變化，若變化就執(zhí)行3
- 組件銷毀時(shí)，回收監(jiān)聽(tīng)事件
實(shí)現(xiàn)
創(chuàng)建組件
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>
自定義一個(gè)hook，導(dǎo)出一個(gè)autoBindRef綁定ref
自定義hook文件
useAutoResize.ts
import { ref } from 'vue';
export function useAutoResize() {
let domRef = ref<HTMLElement | null>();
function autoBindRef() {
}
return {
autoBindRef
}
}
1、綁定domRef
確保先獲取到dom元素，邏輯才可以繼續(xù)往下走。
創(chuàng)建一個(gè)函數(shù)，用于檢測(cè)獲取正確的dom元素
function getRefDom(ref: HTMLElement | ComponentPublicInstance): HTMLElement | null {
// ref指向dom，則返回ref
// isElement檢查指定的值是否為DOM元素
if (isElement(ref)) {
return ref as HTMLElement
}
// 若ref指向組件實(shí)例，通過(guò)$el獲取dom元素
if (isElement((ref as ComponentPublicInstance).$el)) {
return (ref as ComponentPublicInstance).$el
}
return null
}
自動(dòng)綁定組件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
}
}
2、初始化
export function useAutoResize() {
onMounted(() => {
initDom(domRef.value)
initConifg(domRef.value)
})
}
mounted時(shí)期，dom都已掛載完畢，故需在此周期獲取dom元素。
2.1、初始化dom
function initDom(dom:HTMLElement) {
const { clientWidth = 0, clientHeight = 0 } = dom || {}
if(!dom) {
console.warn("獲取dom節(jié)點(diǎn)失敗，組件渲染可能異常!")
return
} else if(!clientWidth || !clientHeight) {
console.warn("組件寬度或高度為0px，可能會(huì)出現(xiàn)渲染異常!")
return
}
// 設(shè)置縮放比例
if(typeof setAppSacle === 'function') setAppScale(dom)
}
2.2、初始化設(shè)備
獲取到dom后，將獲取到的設(shè)備屏幕分辨率寬高設(shè)置給dom。
function initConfig(dom:HTMLElement) {
const { width, height } = screen || {}
dom.style.width = `${width}px`;
dom.style.height = `${height}px`;
}
2.3、設(shè)置縮放效果
function setAppScale(dom:HTMLElement){
const currentWidth = document.body.clientWidth;
const { width } = screen || {};
dom.style.transform = `scale(${currentWidth / width})`;
}
當(dāng)dom元素改變/窗口大小變化時(shí)，觸發(fā)這個(gè)函數(shù)。
3、監(jiān)聽(tīng)/移除事件
需要同時(shí)對(duì)dom元素和窗口大小的變化監(jiān)聽(tīng)
dom元素監(jiān)聽(tīng)
這里我們使用MutationObserver來(lái)對(duì)dom元素的變化來(lái)監(jiān)聽(tīng)
function observerDomResize(dom: HTMLElement, callback: () => void) {
const observer = new MutationObserver(callback);
observer.observe(dom, {
attributes: true,
attributeFilter: ['style'],
attributeOldValue: true,
})
return observer
}
在mounted周期內(nèi)設(shè)置監(jiān)聽(tīng)
export function useAutoResize() {
const handleInitDom = () => {
initDom(domRef.value)
}
onMounted(() => {
initDom(domRef.value)
initConifg(domRef.value)
observerDomResize(domRef.value, handleInitDom)
window.removeEventListener('resize', handleInitDom);
})
}
但是如果我們直接這樣寫，他就會(huì)頻繁調(diào)用handleInitDom函數(shù)，造成性能浪費(fèi)，所以使用防抖函數(shù)先包裝一下事件處理函數(shù)handleInitDom再調(diào)用。
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);
}
);
})
}
監(jiān)聽(tīng)了事件，那么在組件卸載時(shí)就要清除它
onUnmounted(() => {
domSizeEffectDisposer.forEach(disposer => disposer())
})
小結(jié)
這樣我們就完成了一個(gè)vue3的全屏容器組件的封裝。自定義hook真的還挺香~
以上就是vue3 hook重構(gòu)DataV的全屏容器組件詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 hook重構(gòu)DataV的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue echarts畫(huà)甘特圖流程詳細(xì)講解
這篇文章主要介紹了Vue echarts畫(huà)甘特圖流程，甘特圖（Gantt chart）又稱為橫道圖、條狀圖(Bar chart)。其通過(guò)條狀圖來(lái)顯示項(xiàng)目、進(jìn)度和其他時(shí)間相關(guān)的系統(tǒng)進(jìn)展的內(nèi)在關(guān)系隨著時(shí)間進(jìn)展的情況2022-09-09
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對(duì)象，而類或者說(shuō)是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue2封裝input組件方式(輸入的雙向綁定)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
vue隨機(jī)驗(yàn)證碼組件的封裝實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何封裝一個(gè)隨機(jī)驗(yàn)證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
vue的圖片需要用require的方式進(jìn)行引入問(wèn)題
這篇文章主要介紹了vue的圖片需要用require的方式進(jìn)行引入問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue?非常實(shí)用的自定義指令分享，Vue自定義指令有全局注冊(cè)和局部注冊(cè)兩種方式，在?Vue，除了核心功能默認(rèn)內(nèi)置的指令?(?v-model?和?v-show?)，Vue?也允許注冊(cè)自定義指令，下文小編給大家分享那些常用到的Vue自定義指令2022-02-02
Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請(qǐng)求，重復(fù)發(fā)送多次請(qǐng)求，本文主要介紹了Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法，感興趣的可以了解一下2022-02-02
vue配置文件自動(dòng)生成路由和菜單實(shí)例代碼
因?yàn)椴煌挠脩粲胁煌臋?quán)限,能訪問(wèn)的頁(yè)面是不一樣的,所以我們?cè)趯懞笈_(tái)管理系統(tǒng)時(shí)就會(huì)遇過(guò)這樣的需求：根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單，這篇文章主要給大家介紹了關(guān)于vue配置文件自動(dòng)生成路由和菜單的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-router 控制路由權(quán)限的實(shí)現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09