脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue子组件使用window.onresize()只执行一次

vue子组件中使用window.onresize()只执行一次问题

 更新时间：2024年08月10日 16:57:48   作者：小三金  
这篇文章主要介绍了vue子组件中使用window.onresize()只执行一次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

描述

做了个简单的echarts组件，其中有个功能是当窗口变化时，刷新echarts。

用了window.onresize()，且用了防抖方法，但是一个页面中会有多处用到echarts的组件，重点是当将窗口拖拽时，却只执行了一次。

window.onresize = () => {
                delay(function () {
                    //防抖重画                    
                    _this.handleDispose()
                    _this.handleDraw()
                }, 500)
            }

解决方案

使用 window.addEventListener('resize',function(){})

window.addEventListener('resize', _this.handleReDraw)

区别：

  • window.addEventListener():为每个事件指定一个回调函数去处理，简单说，以我这个组件为例，是为每个组件都指定了一个回调函数处理
  • window.onresize():是统一用一个回调去去处理，简单说，N个子组件都用了一个同一个函数去处理，所以，只能最后一个子组件好用，因为后者覆盖了前面的方法

tips：

  • 根据你的业务逻辑，别忘了removeEventListener()，否则它会一直监听
  • 如果你的是后台管理系统，且有多页tabs功能(开多页功能)，那么你要监听下route并做好除去监听方法，否则它也会一直监听

 watch: {
        options (newVal, oldVal) {
            let _this = this
            if (newVal) {
                _this.init()
            }
        },
        $route: {
            handler: function (route) {
                const _this = this

                if (route.name != "Index") {
                    //移除监听
                    window.removeEventListener('resize', _this.handleReDraw)
                } else {
                    //监听窗口变化
                    window.addEventListener('resize', _this.handleReDraw)
                }

            },
            immediate: true,
        },
    },

... 
// 页面初始化
    created () { },
    // 页面DOM加载完成
    mounted () {
        let _this = this
        _this.init()

        //监听窗口变化
        window.addEventListener('resize', _this.handleReDraw)

    },
    //离开页面时执行
    destroyed () {
        const _this = this

        //移除监听
        window.removeEventListener('resize', _this.handleReDraw)
    },
...

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue实现本地存储添加删除修改功能

    vue实现本地存储添加删除修改功能

    这篇文章主要为大家详细介绍了vue实现本地存储添加删除修改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue+SpringBoot使用WebSocket方式

    vue+SpringBoot使用WebSocket方式

    WebSocket是一种全双工通信协议,通过HTTP升级机制建立连接,支持实时双向数据传输,示例代码展示了如何在Java Spring Boot和Vue.js中实现WebSocket服务和客户端
    2025-02-02
  • vue升级之路之vue-router的使用教程

    vue升级之路之vue-router的使用教程

    自动安装的vue-router，会在src 文件夹下有个一个 router -> index.js 文件 在 index.js 中创建 routers 对象，引入所需的组件并配置路径。这篇文章主要介绍了vue-router的使用,需要的朋友可以参考下
    2018-08-08
  • nginx+vite项目打包以及部署的详细过程

    nginx+vite项目打包以及部署的详细过程

    我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于nginx+vite项目打包以及部署的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue项目中定时器无法清除的原因解决

    vue项目中定时器无法清除的原因解决

    页面有定时器,并且定时器在离开页面时,有清除,本文主要介绍了vue项目中定时器无法清除的原因解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • vue中预览zip的实现示例

    vue中预览zip的实现示例

    打包压缩成zip的东西,再解压,很麻烦,本文主要介绍了vue中预览zip的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • vue3 provide与inject的使用小技巧分享

    vue3 provide与inject的使用小技巧分享

    这篇文章主要介绍了vue3 provide与inject的使用小技巧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue移动端下拉刷新和上滑加载

    vue移动端下拉刷新和上滑加载

    这篇文章主要为大家详细介绍了vue移动端下拉刷新和上滑加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 学习Vite的原理

    学习Vite的原理

    这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下
    2022-02-02
  • Vue CLI2升级至Vue CLI3的方法步骤

    Vue CLI2升级至Vue CLI3的方法步骤

    这篇文章主要介绍了Vue CLI2升级至Vue CLI3的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论