vue3+ts獲取dom元素高度

<template>
  <div class="digestDetail-indedx">
    <div class="video" ref="video">
      <video
        controls="controls"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        x5-video-player-type="h5"
        x5-video-orientation="h5"
        x5
 
-video-player-fullscreen="true"
        x5-playsinline="true"
        src="/zhu.mp4"
      ></video>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  ref,
  onBeforeMount,
  onMounted,
  Ref,
} from "vue";
 
//
import { shareInit } from "@/utils/wx-share";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "headDetail",
  setup() {
    const video = ref();
    const videoHeight = ref(0);
    onMounted(() => {
      videoHeight.value = video.value?.clientHeight + 20;
    });
    
 
return {
      video,
      videoHeight,
    };
  },
});
</script>