大屏项目使用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
})
})
版权归原作者 聆听+自律 所有, 如有侵权,请联系我们删除。