VUE3 获取元素高度

<v-header ref="headerRef" />
<v-tags ref="tagsRef"></v-tags>

import { ref, reactive, onMounted, watch } from 'vue'

setup() {
let clientHeight = ref('') //浏览器可视区域高度
const headerRef = ref(null)

const tagsRef = ref(null)
let slbHeight = ref('')

onMounted(() => {

clientHeight.value = `${document.documentElement.clientHeight}` //获取浏览器可视区域高度

let headerHeight = headerRef.value.$el.clientHeight

let tagsHeight = tagsRef.value.$el.clientHeight

slbHeight.value = clientHeight.value - headerHeight - tagsHeight

window.onresize = function () {

clientHeight.value = `${document.documentElement.clientHeight}` //获取浏览器可视区域高度

let headerHeight = headerRef.value.$el.clientHeight

let tagsHeight = tagsRef.value.$el.clientHeight

slbHeight.value = clientHeight.value - headerHeight - tagsHeight

}

})



return {

clientHeight,

slbHeight,

headerRef,

tagsRef,

}