vue如何获取屏幕的宽度 vue获取屏幕宽度和高度

文章摘要：vue如何获取屏幕的宽度 vue获取屏幕宽度和高度

在vue中获取屏幕宽度的方法有：1.使用document.documentElement方法获取；2.在wat […]

在vue中获取屏幕宽度的方法有：1.使用document.documentElement方法获取；2.在watch中实时监听；3.使用mounted函数获取；

具体方法如下：

1.使用document.documentElement方法获取屏幕的宽高

windowWidth: document.documentElement.clientWidth, //获取屏幕宽度

windowHeight: document.documentElement.clientHeight, //获取屏幕高度

2.在watch中实时监听屏幕宽高

watch: {

windowHeight (val) {

let that = this;

console.log("实时屏幕高度：",val, that.windowHeight );

},

windowWidth (val) {

let that = this;

console.log("实时屏幕宽度：",val, that.windowHeight );

}

},

3.使用mounted函数获取屏幕宽高

mounted() {

var that = this;

window.onresize = () => {

return (() => {

window.fullHeight = document.documentElement.clientHeight;

window.fullWidth = document.documentElement.clientWidth;

that.windowHeight = window.fullHeight; //获取屏幕高度

that.windowWidth = window.fullWidth; //获取屏幕宽度

})()

};

},