浅谈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 相关文章推荐
基于jquery的滑动样例代码
Nov 20 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 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
一个取得文件扩展名的函数
2006/10/09 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
pygame实现弹力球及其变速效果
2017/07/03 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
C++的几个面试题附答案
2016/08/03 面试题
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
股东授权委托书范文
2014/09/13 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL