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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
Javascript动画效果(2)
Oct 11 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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
一个用php实现的获取URL信息的类
2007/01/02 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
jquery选择器简述
2015/08/31 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
python图像处理之镜像实现方法
2015/05/30 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
全球性的女装店:storets
2019/06/12 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
民事诉讼代理词
2015/05/25 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
JavaScript文档对象模型DOM
2021/11/20 Javascript
详解python的异常捕获
2022/03/03 Python
python对文档中元素删除,替换操作
2022/04/02 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL