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', ()=>{
})
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue2项目中封装echarts地图的优雅方法,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vuex页面刷新后数据丢失的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue中子组件调用兄弟组件方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
今天小编就为大家分享一篇Vue axios设置访问基础路径方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,下面这篇文章主要给大家介绍了关于如何使用electron将vue项目打包成exe的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue组件中的数据传递方法,非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要介绍了Vue3 axios配置以及cookie的使用方法,需要的朋友可以参考下2023-02-02
vuejs是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。今天给大家分享一篇教程关于Vue.js 60分钟快速入门教程，一起看看吧2017-03-03
这篇文章主要介绍了Vue + element-ui 背景图片设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。这篇文章主要介绍了用vue-infinite-scroll实现无限滚动效果,需要的朋友可以参考下2018-06-06
最新评论