DataV在浏览器放大缩小以及全屏前后不能自适应问题

最新推荐文章于 2025-06-24 09:56:07 发布

聆听+自律

最新推荐文章于 2025-06-24 09:56:07 发布

阅读量4.1k

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/m0_70542915/article/details/130133554

在大屏项目中，使用DataV组件库遇到问题，当浏览器缩放或大屏进出全屏模式后，大屏高度会持续增加。尝试用onResize和initWH事件重置无果，因为父元素已被撑开。最终解决方案是通过在组件上添加key值，并利用Vue的ref和nextTick在全屏变化和窗口resize事件中更新key，从而触发组件重新渲染，恢复原始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大屏项目使用DataV组件库，浏览器放大缩小以及大屏进入全屏和退出全屏后，大屏的高度一直在累加，没有还原成原始状态，尝试使用组件的onResize事件以及initWH事件去重置，但是父元素已经被撑开了，onResize和initWH获取的都是撑开后的大小，所以无效

最后查看官网

给组件添加key值才解决

<dv-scroll-board :key="scrollBoardKey" :config="config" />

import { ref, nextTick } from 'vue'

const scrollBoardKey = ref(0)

onMounted(() => {
    //监听是否全屏
    /*document.addEventListener("fullscreenchange", () => {
        nextTick(() => {
            scrollBoardKey.value++
        })
    })*/
    //监听浏览器放大或缩小
    window.addEventListener('resize', () => {
        nextTick(() => {
            scrollBoardKey.value++
        })
    })
})

onUnmounted(() => {
    document.removeEventListener('fullscreenchange', () => {
        return
    })
    window.removeEventListener('resize', () => {
        return
    })
})