浅谈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中的onerror事件概述及使用
Apr 01 Javascript
实测jquery data()如何存值
Aug 18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
Promise.all中对于reject的处理方法
Aug 01 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
JS实现小米轮播图
Sep 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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
农救科工作职责
2013/11/27 职场文书
行政专员工作职责
2013/12/22 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
回复函范文
2015/07/14 职场文书
村主任当选感言
2015/08/01 职场文书
小学运动会开幕词
2016/03/04 职场文书
在python中读取和写入CSV文件详情
2022/06/28 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技