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 相关文章推荐
jQuery插件的写法分享
Jun 12 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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自带的进位制之间的转换函数
2013/06/08 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JS跨域总结
2012/08/30 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
详解anaconda安装步骤
2020/11/23 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
小学生考试获奖感言
2014/01/30 职场文书
商铺消防安全责任书
2014/07/29 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
化工生产实习心得体会
2016/01/22 职场文书