Vue 实时监听窗口变化 windowresize的两种方法


Posted in Javascript onNovember 06, 2018

下面给大家分享两种方法来介绍Vue 实时监听窗口变化 windowresize,具体内容如下所示:

方法一:

First-step : 定义变量

data(){
  return{
     formLabelWidth : '123px'
  }
},

Second-step:   根据生命周期 在mounted 中绑定 窗口变化

mounted(){
       const that = this
       window.onresize = () => {
         return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
         })()
       }
 },

Third-step:   绑定监听 watch

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.2x里面时候,mounted 里面可以直接挂载 window.onresize事件。全局监听

mounted(){
       window.onresize = () => {
         return (() => {
           this.handleLableWidth();
         })()
       }
       this.handleLableWidth();
},

完全可以做到检测窗口变化

总结

以上所述是小编给大家介绍的Vue 实时监听窗口变化 windowresize的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue组件tabbar使用方法详解
Nov 06 #Javascript
微信小程序下拉框功能的实例代码
Nov 06 #Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 #Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php字符串截取的简单方法
2013/07/04 PHP
Yii实现简单分页的方法
2016/04/29 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
大学自荐信
2013/12/12 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
就业协议书范本
2014/10/08 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书