vue如何实时监听当前浏览器分辨率大小,根据不同分辨率执行不同操作,下面编程教程网小编给大家简单介绍一下具体实现代码!
具体代码如下:
data(){
return{
screenWidth: null,
}
},
mounted() {
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
},
watch: {
screenWidth: {
handler: function (val) {
if (val < 1024) {
console.log(val + '屏幕宽度不能小于1024')
} else {
console.log(val + '屏幕宽度属于正常状态')
}
}
},
}
以上是编程学习网小编为您介绍的“vue实时监听获取屏幕尺寸大小”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue实时监听获取屏幕尺寸大小


猜你喜欢
- Ajax实现文件上传功能(Spring MVC) 2023-02-23
- JavaScript实现模态框拖拽效果 2023-08-11
- 纯CSS3实现鼠标悬停提示气泡效果 2024-01-05
- 如何利用vue实现css过渡和动画 2024-03-11
- 基于Javascript实现返回顶部按钮 2023-12-26
- Ajax实现列表无限加载和二级下拉选项效果 2023-02-14
- jquery插件推荐 jquery.cookie 2024-03-01
- 负margin功能介绍及用法总结 2024-01-04
- Vue cli写的一款PC端音乐播放器(网易云的API) 2023-10-08
- new Vue() vs createApp() 2023-10-08