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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
Javascript节点关系实例分析
May 15 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
Angular2库初探
2017/03/01 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
深入浅析Python的类
2018/06/22 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Django的Modelforms用法简介
2019/07/27 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
成绩单评语
2015/01/04 职场文书
教师辞职信范文
2015/02/28 职场文书
个性发展自我评价2015
2015/03/09 职场文书