vue3 후크가 DataV의 전체 화면 컨테이너 구성 요소를 재구성하는 방법

components

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

customize and autobindref 바인딩 ref

custom hook 파일 auseautoresize.ts

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

1을 내보내십시오 , 논리가 계속 다운될 수 있습니다.

올바른 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)
    })
}

마운트 기간 동안 dom이 마운트되었으므로 dom 요소를 가져와야 합니다. 이 주기 동안.

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

2.2. 장치 초기화

dom을 얻은 후 얻은 장치 화면 해상도 너비와 높이를 dom으로 설정합니다.

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

2.3 확대/축소 효과 설정

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

이 함수는 DOM 요소가 변경되거나 창 크기가 변경될 때 트리거됩니다.

3. 청취/제거 이벤트

dom 요소와 창 크기의 변화를 동시에 모니터링해야 합니다.

dom 요소 모니터링

여기서는

을 사용하여 dom 요소의 변화를 모니터링합니다.

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

마운트된 주기 동안 모니터링을 설정합니다.

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 후크가 DataV의 전체 화면 컨테이너 구성 요소를 재구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!