欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3?hook重構(gòu)DataV的全屏容器組件詳解

 更新時間：2023年04月07日 14:13:18   作者：叁兩  
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

上一篇我們仔細閱讀了DataV的全屏容器組件的源碼，首先我們來梳理下它的實現(xiàn)邏輯。

  • 獲取該組件dom，獲取他的可視寬高
  • 獲取設(shè)備屏幕的分辨率作為該dom的寬高
  • 根據(jù)當(dāng)前視口的寬度/屏幕分辨率的寬度為縮放比例對該dom進行縮放
  • 監(jiān)聽該dom元素的style元素變化、resize變化，若變化就執(zhí)行3
  • 組件銷毀時，回收監(jiān)聽事件

實現(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>

自定義一個hook，導(dǎo)出一個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)建一個函數(shù)，用于檢測獲取正確的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
    }
}

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節(jié)點失敗，組件渲染可能異常!")
        return
    } else if(!clientWidth || !clientHeight) {
        console.warn("組件寬度或高度為0px，可能會出現(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元素改變/窗口大小變化時，觸發(fā)這個函數(shù)。

3、監(jiān)聽/移除事件

需要同時對dom元素和窗口大小的變化監(jiān)聽

dom元素監(jiān)聽

這里我們使用MutationObserver來對dom元素的變化來監(jiān)聽

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)聽

export function useAutoResize() {
    const handleInitDom = () => {
        initDom(domRef.value)
    }
    onMounted(() => {
        initDom(domRef.value)
        initConifg(domRef.value)
        observerDomResize(domRef.value, handleInitDom)
        window.removeEventListener('resize', handleInitDom);
    })
}

但是如果我們直接這樣寫，他就會頻繁調(diào)用handleInitDom函數(shù)，造成性能浪費，所以使用防抖函數(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)聽了事件，那么在組件卸載時就要清除它

onUnmounted(() => {
    domSizeEffectDisposer.forEach(disposer => disposer())
  })

小結(jié)

這樣我們就完成了一個vue3的全屏容器組件的封裝。自定義hook真的還挺香~

以上就是vue3 hook重構(gòu)DataV的全屏容器組件詳解的詳細內(nèi)容，更多關(guān)于vue3 hook重構(gòu)DataV的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • Vue echarts畫甘特圖流程詳細講解

    Vue echarts畫甘特圖流程詳細講解

    這篇文章主要介紹了Vue echarts畫甘特圖流程，甘特圖（Gantt chart）又稱為橫道圖、條狀圖(Bar chart)。其通過條狀圖來顯示項目、進度和其他時間相關(guān)的系統(tǒng)進展的內(nèi)在關(guān)系隨著時間進展的情況
    2022-09-09
  • 淺析從面向?qū)ο笏季S理解Vue組件

    淺析從面向?qū)ο笏季S理解Vue組件

    用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對象，而類或者說是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下
    2021-07-07
  • vue2封裝input組件方式(輸入的雙向綁定)

    vue2封裝input組件方式(輸入的雙向綁定)

    這篇文章主要介紹了vue2封裝input組件方式(輸入的雙向綁定)，具有很好的參考價值，希望對大家有所幫助。
    2023-04-04
  • vue隨機驗證碼組件的封裝實現(xiàn)

    vue隨機驗證碼組件的封裝實現(xiàn)

    這篇文章主要為大家詳細介紹了如何封裝一個隨機驗證碼的VUE組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • vue的圖片需要用require的方式進行引入問題

    vue的圖片需要用require的方式進行引入問題

    這篇文章主要介紹了vue的圖片需要用require的方式進行引入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • Vue?非常實用的自定義指令分享

    Vue?非常實用的自定義指令分享

    這篇文章主要介紹了Vue?非常實用的自定義指令分享，Vue自定義指令有全局注冊和局部注冊兩種方式，在?Vue，除了核心功能默認內(nèi)置的指令?(?v-model?和?v-show?)，Vue?也允許注冊自定義指令，下文小編給大家分享那些常用到的Vue自定義指令
    2022-02-02
  • Vue中Axios中取消請求及阻止重復(fù)請求的方法

    Vue中Axios中取消請求及阻止重復(fù)請求的方法

    為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時間內(nèi)重復(fù)進行接口請求，重復(fù)發(fā)送多次請求，本文主要介紹了Vue中Axios中取消請求及阻止重復(fù)請求的方法，感興趣的可以了解一下
    2022-02-02
  • vue配置文件自動生成路由和菜單實例代碼

    vue配置文件自動生成路由和菜單實例代碼

    因為不同的用戶有不同的權(quán)限,能訪問的頁面是不一樣的,所以我們在寫后臺管理系統(tǒng)時就會遇過這樣的需求：根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單，這篇文章主要給大家介紹了關(guān)于vue配置文件自動生成路由和菜單的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • Vue?FileManagerPlugin?報錯問題及解決

    Vue?FileManagerPlugin?報錯問題及解決

    這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue-router 控制路由權(quán)限的實現(xiàn)

    vue-router 控制路由權(quán)限的實現(xiàn)

    這篇文章主要介紹了vue-router 控制路由權(quán)限的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09

最新評論