温馨提示×

vue如何获取屏幕的宽度

vue
养鱼的猫咪
2207
2021-05-10 13:21:09
栏目: 编程语言

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

vue如何获取屏幕的宽度

具体方法如下:

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; //获取屏幕宽度

})()

};

},

0