Vue 实时监听窗口变化 windowresize的两种方法
更新时间：2018年11月06日 16:32:13 作者：MoonMoonLee
这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
下面给大家分享两种方法来介绍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的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了在不使用ssr的情况下解决Vue单页面SEO问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue子组件向父组件传值方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
这篇文章主要给大家介绍了关于Vue3的vite中图片动态加载3种方式的相关资料,图片进入可视区域,进行动态加载图片操作,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue中使用import进行路由懒加载的原理分析。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue实现整屏滚动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
ant-design-vue中设置Table每页显示的条目数量方式
这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了Vue+express+Socket实现聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue监听浏览器原生返回按钮,进行路由转跳操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论