浅谈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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
使用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/07/12 PHP
一些关于PHP的知识
2006/11/17 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
php获取远程文件大小
2015/10/20 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python常见数制转换实例分析
2015/05/09 Python
Django Highcharts制作图表
2016/08/27 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
作风建设年度心得体会
2014/10/29 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技