脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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异步更新dom的实现浅析

    vue异步更新dom的实现浅析

    Vue中的数据更新是异步的，意味着我们在修改完Data之后并不能立刻获取修改后的DOM元素。本文介绍了vue异步更新dom的实现，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue2.0 从零开始_环境搭建操作步骤

    Vue2.0 从零开始_环境搭建操作步骤

    下面小编就为大家带来一篇Vue2.0 从零开始_环境搭建操作步骤。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue单页面实现当前页面刷新或跳转时提示保存

    vue单页面实现当前页面刷新或跳转时提示保存

    这篇文章主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • vue如何使用element ui表格el-table-column在里面做判断

    vue如何使用element ui表格el-table-column在里面做判断

    这篇文章主要介绍了vue如何使用element ui表格el-table-column在里面做判断问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue从后端获取到文件的 url 地址及前端根据 url 地址下载文件的实现思路

    vue从后端获取到文件的 url 地址及前端根据 url 地址下载文件的实现思路

    这篇文章主要介绍了vue 中从后端获取到文件的 url 地址及前端根据 url 地址下载文件,项目用的是 vben admin 框架,用的是 vue3 + TS,后端返回的是文件的 url 地址,对vue后端获取 url 地址的相关知识感兴趣的朋友一起看看吧
    2024-02-02
  • vue.js实现照片放大功能

    vue.js实现照片放大功能

    这篇文章主要为大家详细介绍了vue.js实现照片放大功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 解决vuex刷新状态初始化的方法实现

    解决vuex刷新状态初始化的方法实现

    这篇文章主要介绍了解决vuex刷新状态初始化的方法实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue中使用Axios最佳实践方式

    vue中使用Axios最佳实践方式

    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，Axios 使用简单,包尺寸小且提供了易于扩展的接口，这篇文章主要介绍了vue中使用Axios最佳实践,需要的朋友可以参考下
    2022-09-09
  • IDEA安装vue插件图文详解

    IDEA安装vue插件图文详解

    这篇文章主要为大家详细介绍了IDEA安装vue插件图文，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue实现可拖拽的dialog弹框

    vue实现可拖拽的dialog弹框

    element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验，本文实现了vue可拖拽的dialog弹框，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论