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);
})
}
但是如果我們直接這樣寫(xiě)，他就會(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-cli中的圖片資源存放位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用Vue-cli 3.0搭建Vue項(xiàng)目的方法
這篇文章主要介紹了使用Vue-cli 3.0搭建Vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue插件tab選項(xiàng)卡的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
前端Vue頁(yè)面中展示本地圖片簡(jiǎn)單代碼示例
今天遇到一個(gè)在vue文件中引入本地圖片的問(wèn)題,于是有了這篇文章,本文主要給大家介紹了關(guān)于前端Vue頁(yè)面中展示本地圖片的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
現(xiàn)在很多14寸的筆記本，出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目，自己開(kāi)發(fā)的時(shí)候都是按照100%比例來(lái)開(kāi)發(fā)的，上線了就會(huì)發(fā)現(xiàn)這個(gè)問(wèn)題，今天就這個(gè)問(wèn)題給出解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue2.0 datepicker的使用方法，非常不錯(cuò)，具有參考借鑒借鑒價(jià)值，需要的朋友參考下2018-02-02
詳解Vue中過(guò)度動(dòng)畫(huà)效果應(yīng)用
這篇文章主要介紹了詳解Vue中過(guò)度動(dòng)畫(huà)效果應(yīng)用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
我們?cè)赩ue.js項(xiàng)目中經(jīng)常需要引用圖片,所以下面這篇文章主要介紹了關(guān)于在Vue頁(yè)面中如何更優(yōu)雅地引入圖片的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12