vue获取this.$refs['ref_cloudTwoBox'].offsetHeight为0,如何解决
时间: 2023-06-04 11:03:36 浏览: 545
您可以尝试在 mounted 钩子函数中使用 $nextTick 方法来获取元素的实际高度,代码如下:
mounted() {
this.$nextTick(() => {
const height = this.$refs['ref_cloudTwoBox'].offsetHeight;
console.log(height);
});
}
相关问题
vue $refs获取高度
可以使用 `$refs` 来获取元素的高度。假设你有一个 `div` 元素,可以通过以下方式获取其高度:
在模板中添加 `ref` 属性:
```html
<div ref="myDiv">这是一个div</div>
```
在组件中使用 `$refs` 获取元素高度:
```javascript
mounted() {
console.log(this.$refs.myDiv.offsetHeight);
}
```
注意,只有在组件渲染完成后才能正常获取元素的高度,因此需要在 `mounted` 钩子函数中获取。如果需要在窗口大小发生变化时重新计算高度,可以使用 `window.addEventListener` 监听 `resize` 事件。
vue 获取ref高度
在Vue中,可以使用`this.$refs`来获取组件的引用(ref)。要获取引用的高度,可以通过`$el.offsetHeight`属性来获取。例如,如果你有一个组件引用名为"searchBar",你可以使用以下代码获取它的高度:
```javascript
const searchBarHeight = this.$refs.searchBar.$el.offsetHeight;
```
同样地,如果你有一个组件引用名为"bottomOperateBtn",你可以使用以下代码获取它的高度:
```javascript
const bottomBtnHeight = this.$refs.bottomOperateBtn.$el.offsetHeight;
```
你还可以使用`window.innerHeight`来获取浏览器的可视区域高度:
```javascript
const height = window.innerHeight;
```
最后,你可以使用`calc()`函数来计算并设置元素的高度,例如:
```javascript
this.$refs.classifyContent.style.height = `calc(${height}px - ${searchBarHeight}px - ${bottomBtnHeight}px)`;
```
这样就可以根据浏览器窗口的高度动态设置元素的高度了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue动态获取高度(移动端)](https://blog.csdn.net/JunVei/article/details/126273230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]