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 常用函数库详解
Oct 21 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
js实现翻牌小游戏
Jul 31 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
javascript生成大小写字母
2015/07/03 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python简易远程控制单线程版
2018/06/20 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python字典与json转换的方法总结
2020/12/28 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
医药销售自荐书
2014/05/29 职场文书
八一建军节演讲稿
2014/09/10 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
休假证明书
2015/06/24 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2016党员党课心得体会
2016/01/07 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers