vue代码
<template>
<div>寬:{{screenWidth}} 高:{{screeHeight}}</div>
</template>
<script>
export default {
data() {
return {
screenWidth: 1000, //宽屏幕尺寸
screeHeight: 1000
};
},
mounted() {
//获取屏幕长宽
(this.screenWidth = document.documentElement.clientWidth),
(this.screeHeight = document.documentElement.clientHeight),
(window.onresize = () => {
//屏幕尺寸变化就重新赋值
return (() => {
this.screenWidth = document.documentElement.clientWidth;
this.screeHeight = document.documentElement.clientHeight;
})();
});
}
};
</script>
<style scoped>
</style>
效果图
![]()