项目场景：
vue项目中想实现手动使一个div全屏铺满。我使用得是动态class然后改变布局。
问题描述
在触发事件动态修改class发现resize没有触发。
const toggle = () => {
isDivscreen.value = !isDivscreen.value
nextTick(() => {
isDivscreen.value ? (props.el as HTMLElement).classList.add('_div-full-fixed') : (props.el as HTMLElement).classList.remove('_div-full-fixed')
})
};
-------------------css-----------------------
._div-full-fixed {
position: fixed !important;
left: 0;
top: 0;
z-index: 9999;
background-color: red;
width: 500px;
height: 500px;
}
.screenfull-svg {
color: $base-navbar-icon-color;
display: inline-block;
cursor: pointer;
font-size: 30px;
&:hover {
color: #00dff0;
}
}
---------------resize-----------
this.dom.addEventListener("resize", this.resize);
原因分析：
具体原因没有找到--------无语文章来源：https://www.toymoban.com/news/detail-533142.html
解决方案：
因为不知道什么原因只能替代了，网上说resize消耗很大，MutationObserver与ResizeObserver更节省性能。文章来源地址https://www.toymoban.com/news/detail-533142.html
const resizeObserver = new ResizeObserver(this.resize);
resizeObserver.observe(this.dom);
到了这里，关于vue中动态添加class修改div宽高无法触发addEventListener(“resize“)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[pyqt5]动态加载ui文件并给菜单的一个子菜单添加触发事件](https://imgs.yssmx.com/Uploads/2024/02/519927-1.jpeg)
