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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
Javascript的闭包
Dec 31 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
vue 动态组件用法示例小结
Mar 06 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
js替代copy(示例代码)
2013/11/27 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python深入学习之对象的属性
2014/08/31 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python实现把数字转换成中文
2015/06/29 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
Python实现拼音转换
2021/06/07 Python