vue在mounted中window.onresize不生效问题及解决
更新时间:2022年04月19日 09:18:39 作者:王维璋
这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
mounted中window.onresize不生效
在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。
解决方案
可以采用下面的方式
window.onresize = () => this.screenWidth = window.innerWidth
// 改为以下写法
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)window.onresize被覆盖问题
多个子组件中都存在window.onresize时,后一个会把前一个覆盖,导致之前的onresize都失效。
const _this = this
window.onresize = function() {
if (_this.chart) {
_this.chart.resize()
}
}解决方案
使用addEventListener方法添加监听
const _this = this
window.addEventListener('resize', () => {
if (_this.chart) {
_this.chart.resize()
}
})以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题
在Vue项目构建过程中,如果遇到无法识别'vue-cli-service'命令的错误提示,通常是因为没有全局安装vue-cli,解决这个问题的步骤主要包括:首先检查Vue版本,如果未安装则先安装Vue;其次全局安装vue-cli;若在安装过程中遇到cnpm命令找不到的情况2024-10-10
Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用
这篇文章主要介绍了Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05


最新评论