Vue 实时监听窗口变化 windowresize的两种方法
2018-11-06 16:32
2863 查看
下面给大家分享两种方法来介绍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的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue.js 1.x与2.0中js实时监听input值的变化
- VueJs 监听 window.resize 方法---窗口变化
- 浅谈VUE监听窗口变化事件的问题
- VueJs 监听 window.resize 方法---窗口变化
- js与jquery实时监听输入框值变化方法
- jquery 实时监听输入框值变化的完美方法(必看)
- C#代码像QQ的右下角消息框一样,无论现在用户的焦点在哪个窗口,消息框弹出后都不影响焦点的变化,那么有两种方法
- 关于VUE监听窗口变化事件问题
- Vue2实时监听表单变化的方法
- jQuery实时监听输入框字符变化的方法
- vue.js使用watch监听路由变化的方法
- angular 实时监听input框value值的变化触发函数方法
- Android与JS交互监听,url实时变化的方法.
- Vue路由传参与取值的两种方法
- Vue数据监听方法watch的使用
- vue监听scroll的坑的解决方法
- Android学习总结一:adb的使用、打电话、Button监听两种方法、发短信、ADT23.0.2版本兼容问题
- VUE 实现滚动监听 导航栏置顶的方法
- js实时获取窗口大小变化的实例代码
- iOS中让Settings Bundle中的变化立即在App中反应出来的两种方法