vue监听屏幕尺寸变化问题,window.onresize很简单
更新时间：2023年10月21日 11:00:46 作者：nilmao
这篇文章主要介绍了vue监听屏幕尺寸变化问题,window.onresize很简单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue监听屏幕尺寸变化
>> 可在任意组件中使用
1.在data中定义一个变量，用于记录屏幕尺寸；
data(){
return{
screenWidth: null,
}
}且做好定义为 null
2.使用 window.onresize 方法获取屏幕尺寸；
mounted() {
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
},需要在 mounted() 钩子中
3.使用 watch 方法即可实时监听屏幕尺寸；
watch: {
screenWidth: {
handler: function (val) {
if (val < 900) {
console.log(val+'屏幕宽度小于900px')
} else {
console.log(val+'屏幕宽度大于900px')
}
},
immediate: true,
deep:true
},
}搞定！
window.onresize无效问题
vue中使用window.onresize时无效，由于使用多次 导致后面将之前的所覆盖
解决
使用window.addEventListener() 即可，
代码如下：
mounted:{
// 绑定resize
window.addEventListener('resize', ()=>{
// 书写代码内容
})
},
destoryed:{
// 解绑resize
window.removeEventListener('resize', ()=>{
})
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何实现对请求参数进行签名问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue 2 如何添加 register-service-worker 实现缓存请求的问题
这篇文章主要介绍了Vue 2 如何添加 register-service-worker 以实现缓存请求的目的,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Vue3如何结合X6流程图实现数据双向绑定,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题，具有很好的参考价值，希望对大家有所帮助。2022-12-12
本文从整体上介绍Vue框架的开发流程，结合具体的案例，使用Vue框架调用具体的后端接口，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了vant steps流程图的图标使用slot自定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了Vue2中实现useDraggable的相关知识,文中的示例代码简洁易懂,对我们深入了解vue有一定的帮助,需要的小伙伴可以参考下2023-12-12
这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了vue router 动态路由和嵌套路由，详细的介绍了动态路由和嵌套路由的使用方法，有兴趣的可以了解一下2017-09-09
组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。下面这篇文章主要给大家介绍了关于Vue.js组件间循环引用的相关资料,文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-12-12
最新评论