1. Vue文件如下
<template>
<div :style="autoHeight"></div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight)
export default {
data() {
return {
windowHeight: windowHeight,
autoHeight: {
height: ''
},
}
},
methods: {
getHeight() {
this.autoHeight.height = (windowHeight - 110) + 'px';
},
},
created() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
},
destroyed() {
window.removeEventListener('resize', this.getHeight)
}
}
</script>
2. 說(shuō)明
- 給
div動(dòng)態(tài)綁定style樣式， 如autoHeight
<template>
<div :style="autoHeight"></div>
</template>
- 獲取瀏覽器高度后杏节，經(jīng)過(guò)計(jì)算后賦值
let windowHeight = parseInt(window.innerHeight)
export default {
data() {
return {
windowHeight: windowHeight,
autoHeight: {
height: ''
},
}
},
methods: {
getHeight() {
this.autoHeight.height = (windowHeight - 110) + 'px';
},
},
-
created生命周期中唬渗，監(jiān)聽瀏覽器的變化
created() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
},
destroyed() {
window.removeEventListener('resize', this.getHeight)
}
3. window下的各種寬高度
window.innerWidth
文檔顯示區(qū)(body)的寬度
window.innerHeight
文檔顯示區(qū)(body)的高度
window.outrWidth
窗口的寬度(body+任務(wù)欄)
window.outerHeight
窗口的高度(body+任務(wù)欄)
window.pageYOffset
文檔左上角到文檔顯示區(qū)左上角的距離
screen.width
分辨率的寬度
screen.height
分辨率的高度
screen.availWidth
去掉任務(wù)欄剩余分辨率寬度
screen.availHeight
去掉任務(wù)欄剩余分辨率高度
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
