vue3页面加载完成后获取宽度、高度
刚好H5项目有用到这个需求,页面加载完成后获取当前页面高度,记录一下。^_^<template><div class="wrap" :style="{height:hHeight+'px'}"></div></template><script lang='ts'>import { defineComponent, reactive, ne
·
刚好H5项目有用到这个需求,页面加载完成后获取当前页面高度,记录一下。^_^
<template>
<div class="wrap" :style="{height:hHeight+'px'}">
</div>
</template>
<script lang='ts'>
import { defineComponent, reactive, nextTick, onMounted, toRefs } from "vue";
export default defineComponent({
name: "Aboutus",
setup() {
let state = reactive({
hHeight: 0,//页面高度
});
onMounted(() => {
nextTick(()=>{
state.hHeight = document.documentElement.clientHeight;
console.log(document.documentElement.clientHeight)
})
})
return {
...toRefs(state)
}
},
});
</script>
用vue3.2版本的也可以用语法糖来处理,直接上代码:
<template>
<div class="wrap" :style="{height:state.hHeight+'px'}">
</div>
</template>
<script setup>
import { reactive, nextTick } from "vue"
const state = reactive({
hHeight: 0
})
nextTick(()=>{
state.hHeight = document.documentElement.clientHeight;
console.log(document.documentElement.clientHeight)
})
</script>
亲测可用,大家可以试试!
更多推荐
已为社区贡献3条内容
所有评论(0)