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项目中Eslint校验代码报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在项目中经常会遇到图片上传功能，今天脚本之家小编给大家带来了使用Vue实现图片上传的三种方式，感兴趣的朋友一起看看吧2018-07-07
这篇文章主要为大家详细介绍了vue3如何引用elementUI实现悬浮文本输入框效果,以便实现多行文本输入,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
element-ui和vue表单(对话框)验证提示语(残留)清除操作
这篇文章主要介绍了element-ui和vue表单(对话框)验证提示语(残留)清除操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 做移动端微信公众号采坑经验记录,文中是小编记录的三个坑及解决方案，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了element-ui多文件上传的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了理解Vue2.x和Vue3.x的自定义指令的用法及钩子函数原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2021-09-09
这篇文章主要介绍了vue3中的父子组件通讯详情，文章以传统的props展开主题相关资料内容，具有一定参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了彻底揭秘keep-alive原理(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
使用webpack-obfuscator进行代码混淆及报错解决过程
随着前端应用的复杂度增加,保护客户端的JavaScript代码变得更为重要,webpack-obfuscator插件通过对代码进行混淆,如变量重命名、字符串加密等,提高代码的保密性,防止源码被轻易查看或修改2024-10-10
最新评论