浅谈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 相关文章推荐
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
js实现进度条的方法
Feb 13 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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
获取URL文件名后缀
2013/10/24 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
微信小程序实现页面浮动导航
2019/01/28 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
浅析Python中的多条件排序实现
2016/06/07 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
研究生求职推荐信范文
2013/11/30 职场文书
多媒体教室标语
2014/06/26 职场文书
三严三实对照检查材料
2014/08/25 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
摩登时代观后感
2015/06/03 职场文书
网吧管理制度范本
2015/08/05 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python