vue3中实现监听dom

发布于:2023-09-14 ⋅ 阅读:(50) ⋅ 点赞:(0)

 在vue3遇到业务需要监听窗口大小然后改变dom大小,下面是实现思路

 1.dom
    <div class="dom"></div>
 2.组件初始化获取dom
//获取dom
const dom = ref()

const updateDomWidth = () => {
    dom.value = document.querySelector('dom')
    //可以根据dom的值做业务逻辑处理
};

const resizeListener = () => {
    nextTick(updateDomWidth);
};

onMounted(async () => {
    // 在页面初始化时执行一次DOM宽度监测(如果获取不到dom可以考虑异步获取,加一个定时器)
    updateDomWidth() 
    // 添加窗口大小调整事件监听器
    window.addEventListener('resize', resizeListener);
});

onUnmounted(() => {
    // 在组件卸载时移除事件监听器,以避免内存泄漏
    window.removeEventListener('resize', resizeListener);
});

 总体就是页面加载第一次先获取dom然后添加"resize"事件,然后监听窗口变化!离开页面卸载事件监听