vue3 setup糖衣写法获取组件元素节点宽度高度

在vue中某些需求中,元素需要根据组件自身的高度或着宽度变换而改变,这时就需要动态获取该组件的高度或着宽度。

<script lang="ts" setup>
    import { onMounted, ref } from 'vue'
    const div = ref(null)
    onMounted(() => {
        // 普通获取
        let w = div.value.offsetWidth // 宽度
        let h = div.value.offsetHeight // 高度
        console.log(w, h)
        // 监听窗口改变,改变后重新获取
        window.addEventListener("resize", () => {
            let rw = div.value.offsetWidth // 宽度
            let rh = div.value.offsetHeight // 高度
            console.log(rw, rh)