Wie der Vue3-Hook die Vollbild-Containerkomponente von DataV rekonstruiert

Implementierung

Komponente erstellen

fullScreenContainer.vue

<template>
  <div id="dv-full-screen-container" :ref="autoBindRef">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { useAutoResize } from &#39;@/hooks/useAutoResize&#39;
const { autoBindRef } = useAutoResize()
</script>

Anpassen eines Hooks und Exportieren einer autoBindRef-Bindungsreferenz

benutzerdefinierte Hook-Datei

useAutoResize.ts

import { ref } from 'vue';
export function useAutoResize() {
    let domRef = ref<HTMLElement | null>();
    function autoBindRef() {
    }
    return {
        autoBindRef
    }
}

1. Bind domRef

Stellen Sie sicher, dass Sie es erhalten erstes DOM-Element , kann die Logik weiter sinken.

Erstellen Sie eine Funktion, um das richtige Dom-Element zu erkennen und zu erhalten.

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
}

. Binden Sie die Komponente domRef automatisch während dieses Zyklus.

2.1. Dom initialisieren

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.2. Gerät initialisieren

Stellen Sie nach Erhalt des Doms die erhaltene Bildschirmauflösungsbreite und -höhe auf den Dom ein.

export function useAutoResize() {
    onMounted(() => {
        initDom(domRef.value)
        initConifg(domRef.value)
    })
}

2.3. Stellen Sie den Zoomeffekt ein

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

Diese Funktion wird ausgelöst, wenn sich das Dom-Element/die Fenstergröße ändert.

3. Abhör-/Entfernungsereignisse

Änderungen in Dom-Elementen und Fenstergrößen müssen gleichzeitig überwacht werden

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

Aber wenn wir es direkt so schreiben, wird häufig die Funktion handleInitDom aufgerufen, was zu einer Leistungsverschwendung führt. Verwenden Sie daher die Anti-Shake-Funktion, um die Ereignisverarbeitungsfunktion handleInitDom einzuschließen, bevor Sie sie aufrufen.

function setAppScale(dom:HTMLElement){
    const currentWidth = document.body.clientWidth;
    const { width } = screen || {};
    dom.style.transform = `scale(${currentWidth / width})`;
}

Wenn Sie sich das Ereignis anhören, müssen Sie es löschen, wenn die Komponente deinstalliert wird

function observerDomResize(dom: HTMLElement, callback: () => void) {
    const observer = new MutationObserver(callback);
    observer.observe(dom, {
        attributes: true,
        attributeFilter: ['style'],
        attributeOldValue: true,
    })
    return observer
}

Das obige ist der detaillierte Inhalt vonWie der Vue3-Hook die Vollbild-Containerkomponente von DataV rekonstruiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!