vue在mounted中window.onresize不生效问题及解决

目录
  • mounted中window.onresize不生效
    • 解决方案
  • 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()
      }
    })

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

赞 (0)

相关推荐

  • 深度解读vue-resize的具体用法

    前言 作为一名优秀的前端来说,在平时的造火箭(拧螺丝)过程中,难免要遇到一个情况,就是当窗口resize的时候,我们要进行监听,常见的方案就是 element.addEventListener("resize", cb) 但是对于切过五彩斑斓的黑的你来说,肯定也知道,如果在短时间内多次resize窗口大小,那么我们这个的cb就会被调用多次,这样来说,性能太差了,这时我们会根据我们的业务需要,添加节流或者防抖,但这真的完美了吗 首先,我们要自己手动添加监听函数,其次注意性能问题,包括上面

  • vue中window.onresize的使用解析

    目录 window.onresize的使用 说下重点 window.onresize笔记 1.浏览器尺寸变化响应事件 2.谷歌浏览器中 3.页面尺寸变更事件 window.onresize的使用 说下重点 window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的

  • VueJs监听window.resize方法示例

    Vuejs 本身就是一个 MVVM 的框架. 但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize 恩,我做之前也是百度了一下.看到大家伙都为这个问题而发愁. 问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应. 根据窗口的变化去变化 canvas 的宽度 备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x .ES6) 解决方案: 第一步: 先在 data 中去 定义 一个

  • Vue 实时监听窗口变化 windowresize的两种方法

    下面给大家分享两种方法来介绍Vue 实时监听窗口变化 windowresize,具体内容如下所示: 方法一: First-step : 定义变量 data(){ return{ formLabelWidth : '123px' } }, Second-step:   根据生命周期 在mounted 中绑定 窗口变化 mounted(){ const that = this window.onresize = () => { return (() => { window.screenWidth

  • vue在mounted中window.onresize不生效问题及解决

    目录 mounted中window.onresize不生效 解决方案 window.onresize被覆盖问题 解决方案 mounted中window.onresize不生效 在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效. 解决方案 可以采用下面的方式 window.onresize = () => this.screenWidth = window.innerWidth  // 改为以下写法 window.addEv

  • window.onresize 多次触发的解决方法

    之前做一个扩展,需要在改变窗口大小的时候保证页面显示正常,于是用了 window.onresize 但是发现每次 onresize 后页面中状态总是不对,后来查找出来原来是 onresize 事件触发了多次找成的,于是网上搜集了下解决办法,整理一下. // 关于 onresize 事件触发次数,不同浏览器不同,safari, opera, firefox 都是一次(分别只用了一个版本测试,都是较新的); //ie6 在 quirk 下触发 2 次,标准下 3 次:ie7,8 在 quirk 和

  • Vue自定义指令中无法获取this的问题及解决

    Vue自定义指令中无法获取this的问题及解决

    目录 自定义指令中无法获取this 解决方法 Vue使用this的这几个坑你都知道吗 一.普通函数 二.Vue中的this 自定义指令中无法获取this 问题 最近在使用自定义指令时遇到一个问题,我想在指令里通过this直接去访问vue实例数据,但是显示未定义,经大佬提醒,里面的this很可能不是指向vue实例 解决方法 在函数里增加第三个参数vnode,vnode.context就是指向当前的vue实例 总结 指令里的this不是指向vue实例,可以使用vnode.context获取this

  • MySQL子查询中order by不生效问题的解决方法

    MySQL子查询中order by不生效问题的解决方法

    一个偶然的机会,发现一条SQL语句在不同的MySQL实例上执行得到了不同的结果. 问题描述 创建商品表product_tbl和商品操作记录表product_operation_tbl两个表,来模拟下业务场景,结构和数据如下: 接下来需要查询所有商品最新的修改时间,使用如下语句: select t1.id, t1.name, t2.product_id, t2.created_at from product_tbl t1 left join (select * from product_opera

  • vue中window.addEventListener(‘scroll‘, xx)失效的解决

    目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效

  • vue的代理配置pathRewrite重写不生效问题及解决

    目录 代理配置pathRewrite重写不生效 webpack代理---pathRewrite 代理到本地 代理配置pathRewrite重写不生效 本人遇到的情况在网上搜索时没有看到本人遇到的情况.     devServer: {         proxy: {             //代理匹配前缀2             '/api2': {                 target: 'http://localhost:5001',                 pathR

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • vue在index.html中引入静态文件不生效问题及解决方法

    本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat

  • vue 在methods中调用mounted的实现操作

    首先可以在data中先声明一个变量 比如 sureDelBox : ' ' mounted 中 ---> methods 中 ---> this.sureDelBox(item) 直接this调用 这时候要传的参数别忘记带上 如果你要问在mounted中调用methods中的方法 那么如果是我 我会直接把这个方法直接写在mounted中 补充知识:vue中methods一个方法调用另外一个方法 vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时

随机推荐