浅谈VUE监听窗口变化事件的问题


Posted in Javascript onFebruary 24, 2018

Vuejs 本身就是一个 MVVM 的框架。但是在监听 window 上的 事件 时,往往会显得 力不从心。

比如 这次是 window.resize恩,我做之前也是百度了一下。看到大家伙都为这个问题而发愁。

问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x 、ES6)

解决方案:

第一步: 先在 data 中去 定义 一个记录宽度是 属性

data: { 
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 (这个很重要)
  }

第二步: 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法

mounted () { 
    const that = this window.onresize = function() { 
    return function(){ 
      window.screenWidth = document.body.clientWidth;
      that.screenWidth = window.screenWidth
      })()
     } 
    }

第三步: watch 去监听这个 属性值的变化,如果发生变化则讲这个val 传递给this.screenWidth

watch: { 
   screenWidth (val) { 
      this.screenWidth = val
      } 
    }

第四步:优化 因为 频繁 触发 resize 函数,导致页面很卡的 问题

watch: { 
   screenWidth (val) { 
     if (!this.timer) { 
       this.screenWidth = val 
       this.timer = true 
        let that = this 
   setTimeout(function () { 
        // that.screenWidth = that.$store.state.canvasWidth 
  console.log(that.screenWidth) 
        that.init() 
        that.timer = false 
       }, 400) 
      } 
     } 
   }

最后一步: 去看看你想要的结果吧~

以上这篇浅谈VUE监听窗口变化事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 #Javascript
vue watch监听对象及对应值的变化详解
Feb 24 #Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 #Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 #Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
vue cli webpack中使用sass的方法
Feb 24 #Javascript
vue-cli常用设置总结
Feb 24 #Javascript
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python enumerate内置函数用法总结
2020/01/07 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
高中学生评语大全
2014/04/25 职场文书
服务标语口号
2014/07/01 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015入党个人自传范文
2015/06/26 职场文书
运动会开幕式主持词
2015/07/01 职场文书
实用求职信模板范文
2019/05/13 职场文书
业余无线电通联Q语
2022/02/18 无线电
Redis实现分布式锁的五种方法详解
2022/06/14 Redis