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)