vue监听页面宽高
运用的主要技术：watch监听
话不多说直接上代码，自行研究文章来源地址https://www.toymoban.com/news/detail-504321.html
<template>
<div class="rightContainer">
<h1>监听页面宽高</h1>
<h2>当前整个页面宽度{{ windowWidth }}px</h2>
<h2>当前整个页面高度{{ windowHeight }}px</h2>
</div>
</template>
<script>
export default {
name: 'WatchsHW',
data() {
return {
windowHeight: document.body.clientHeight,
windowWidth: document.body.clientWidth
}
},
watch: {
// 监听页面高度
windowHeight(val) {
console.log('实时屏幕高度：', val, this.windowHeight)
},
// 监听页面宽度
windowWidth(val) {
console.log('实时屏幕宽度：', val, this.windowHeight)
}
},
mounted() {
// <!--把window.onresize事件挂在到mounted函数上-->
window.onresize = () => {
return (() => {
this.windowHeight = document.documentElement.clientHeight // 高
this.windowWidth = document.documentElement.clientWidth // 宽
})()
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.rightContainer{
width: 100%;
text-align: center;
overflow: hidden;
}
</style>
文章来源：https://www.toymoban.com/news/detail-504321.html
到了这里，关于vue如何实现实时监听页面宽度高度变化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
