首页vue3 ref获取dom宽高

vue3 ref获取dom宽高

时间: 2025-02-01 21:08:39 浏览: 76

### 如何在 Vue3 中使用 `ref` 获取 DOM 元素的宽高为了获取 DOM 元素的宽度和高度，在 Vue 3 中可以利用 Composition API 提供的功能来完成此操作。下面是一个具体的例子，展示了如何定义模板中的元素并使用脚本部分访问其尺寸。 #### HTML 和 CSS 配置先设置好带有特定类名 `.box` 的 div 容器用于测试，并赋予它一定的样式以便于观察效果： ```html <template> <div ref="boxElement" class="box"></div> </template> <style scoped> .box { width: 200px; height: 150px; background-color: lightblue; } </style> ``` #### JavaScript 实现逻辑接着编写相应的 TypeScript 或者纯 JS 脚本来处理挂载完成后读取该容器的实际大小的任务。这里采用的是 `<script setup>` 方式简化书写过程[^2]。 ```javascript <script setup lang="ts"> import { ref, onMounted } from 'vue' // 创建响应式的引用对象关联至实际渲染出来的 DOM 结构 const boxElement = ref() onMounted(() => { // 当组件被插入文档之后执行回调函数 if (boxElement.value) { const width = boxElement.value.offsetWidth const height = boxElement.value.offsetHeight console.log(`Width is ${width}px and Height is ${height}px`) } }) </script> ``` 上述代码片段中，当页面加载完毕并且组件已经成功挂在到真实 DOM 上时，会触发 `onMounted()` 生命周期钩子内的匿名函数运行；此时可以通过之前声明好的 `boxElement` 来取得对应节点的信息，进而打印出它的外接矩形区域（即包含内边距在内的整体尺寸）下的宽度与高度值。

阅读全文