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 闭包
Sep 15 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
前端如何实现动画过渡效果
Feb 05 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脚本的10个技巧(1)
2006/10/09 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python 字符串追加实例
2019/07/20 Python
python 读取修改pcap包的例子
2019/07/23 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
应届大学生自荐信格式
2013/09/21 职场文书
环保小标语
2014/06/13 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015年财政局工作总结
2015/05/21 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python