53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="section-view" :style="isCssStyle">
|
||
|
|
<div class="section-view-h5-wrap">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "SectionView",
|
||
|
|
props:{
|
||
|
|
cssStyle:{
|
||
|
|
type:Object,
|
||
|
|
default:()=>{
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
isCssStyle(){
|
||
|
|
return this.cssStyle
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
|
||
|
|
// let vh = window.innerHeight * 0.01
|
||
|
|
// // Then we set the value in the --vh custom property to the root of the document
|
||
|
|
// document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||
|
|
//
|
||
|
|
// // We listen to the resize event
|
||
|
|
// window.addEventListener('resize', () => {
|
||
|
|
// // We execute the same script as before
|
||
|
|
// let vh = window.innerHeight * 0.01
|
||
|
|
// console.log(vh);
|
||
|
|
// document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||
|
|
// })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.section-view{
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
&-h5-wrap{
|
||
|
|
display: block;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|