0


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

大屏项目使用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
    })
})
标签: 前端 javascript html

本文转载自: https://blog.csdn.net/m0_70542915/article/details/130133554
版权归原作者 聆听+自律 所有, 如有侵权,请联系我们删除。

“DataV在浏览器放大缩小以及全屏前后不能自适应问题”的评论:

还没有评论