VueJs监听window.resize方法示例


Posted in Javascript onJanuary 17, 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 = () => {
    return (() => {
     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)
    }
   }
  }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
js断点调试经验分享
Dec 08 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
详解AngularJS之$window窗口对象
Jan 17 #Javascript
React-native桥接Android原生开发详解
Jan 17 #Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
You might like
菜鸟修复电子管记
2021/03/02 无线电
PHP的历史和优缺点
2006/10/09 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
js实现登录验证码
2016/12/22 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
深入了解Django中间件及其方法
2019/07/26 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
预备党员表决心书
2014/03/11 职场文书
煤矿安全协议书
2014/08/20 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
教你nginx跳转配置的四种方式
2022/07/07 Servers