update
This commit is contained in:
parent
403d6499b1
commit
3b842e0b48
24
src/App.vue
24
src/App.vue
|
@ -2,16 +2,22 @@
|
|||
import { RouterView } from "vue-router";
|
||||
import { onMounted } from 'vue'
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", ()=>{
|
||||
heightTemp.value = (window.innerHeight)+"px";
|
||||
document.getElementById("app").style.height = heightTemp.value;
|
||||
});
|
||||
window.addEventListener("DOMContentLoaded", ()=>{
|
||||
heightTemp.value = (window.innerHeight)+"px";
|
||||
document.getElementById("app").style.height = heightTemp.value;
|
||||
});
|
||||
})
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
//首先我们获得视口高度并将其乘以1%以获得1vh单位的值
|
||||
let vh = window.innerHeight * 0.01
|
||||
// 然后,我们将——vh自定义属性中的值设置为文档的根
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||
|
||||
// 我们监听resize事件 视图大小发生变化就重新计算1vh的值
|
||||
window.addEventListener('resize', () => {
|
||||
// 我们执行与前面相同的脚本
|
||||
let vh = window.innerHeight * 0.01
|
||||
console.log(vh);
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -16,6 +16,7 @@ import Sidebar from '../components/Sidebar.vue'
|
|||
.main-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
/* min-width: 640px; */
|
||||
overflow: hidden; /* 防止内部滚动影响布局 */
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue