vue监听页面宽高
运用的主要技术：watch监听
话不多说直接上代码，自行研究
<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>
