在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。
找了下解决方案,可以采用下面的方式写就可以了。

window.onresize = () => {this.measure()}
window.addEventListener('resize',() => this.measure1(), false)
window.addEventListener('resize',() => this.measure2(), false)

销毁可以采用下面的方式

beforeDestroy () {
window.removeEventListener('resize', this.measure1(), false)
}
beforeDestroy () {
window.onresize = null
}

vue中使用两个window.onresize问题解决的更多相关文章

  1. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  2. vue中的指令v-model

    Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀:都有着对应的官网介绍:https://cn.vuejs.org/v2/guide/forms.html v-model:数 ...

  3. window.onresize事件在vue项目中的应用

    //vue页面<template> <div id='echart'> 报表 </div> </template> <script> exp ...

  4. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  5. vue中监听window.resize的变化

    我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...

  6. Vue:window.onresize

    1. 添加属性screenHeight 和 timer. screenHeight: window.innerHeight timer: '' //  window.onresize函数频繁调用时,页 ...

  7. vue中过滤器比较两个数组取相同值

    在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...

  8. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  9. vue 中使用 axios 请求接口,请求会发送两次问题

    在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...

随机推荐

  1. Java中方法和类的深入分析

    1.构造方法不能被继承.也就是说子类里没有父类的构造方法.   Java重载根据的是实参和方法形参之间的匹配.自动类型转换也在重载版本的判断中起到了作用.重载的价值在于允许使用通用名称访问相关的方法. ...

  2. pipeline脚本管理

    目录 一.代码仓库 二.远程拉取 一.代码仓库 1.使用gitlab做pipeline脚本的存储,新建一个仓库 2.新建文件,把代码放进去 脚本名可以按照规律填写,环境_应用名_类型,例如:test_ ...

  3. 「Python实用秘技03」导出项目的极简环境依赖

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第3期 ...

  4. CF1092B Teams Forming 题解

    Content 有 \(n\) 个学生,每个学生有一个能力值 \(a_i\).现在想把学生两两分成一组,但是不能让每个组里面的学生能力值不相同,因此可以通过刷题来提升自己的能力值,每次解出一道题,能力 ...

  5. yum安装curl支持http2

    yum 安装 安装 yum 源 rpm -ivh http://mirror.city-fan.org/ftp/contrib/yum-repo/city-fan.org-release-2-1.rh ...

  6. div中出现滚动条,自动保持在最底端---显示聊天窗口最新的信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. win10修改Docker Desktop Installer的默认安装目录

    Docker Desktop Installer软件默认安装会装在C:\Program Files\Docker的目录下,默认是不能修改的,但是我们可以通过设置软链接的方式把安装默认弄到其他盘 我们先 ...

  8. Linux(centos)使用nc命令发送测试数据

    安装 yum -y install nmap-ncat 简单使用 nc -lk 7777 # 开启一个本地7777的TCP协议端口,由客户端主动发起连接,一旦连接必须由服务端发起关闭 nc -vw 2 ...

  9. Dapr项目应用探索

    背景介绍 前面文章对Dapr的基本信息进行了学习,接下来尝试将Dapr应用相关应用中. 接下来一步步实现应用dapr功能. 一.预期效果 如上图应用Dapr点包含: a) 报表服务绑定统一数据源服务: ...

  10. 【LeetCode】 Binary Tree Zigzag Level Order Traversal 解题报告

    Binary Tree Zigzag Level Order Traversal [LeetCode] https://leetcode.com/problems/binary-tree-zigzag ...