vue3获取ref offsetHeight

可以通过以下代码获取ref元素的offsetHeight：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const myRef = ref(null)
    let offsetHeight = 0

    onMounted(() => {
      offsetHeight = myRef.value.offsetHeight
      console.log(offsetHeight)
    })

    return {
      myRef
    }
  }
}

其中，myRef是一个ref对象，通过ref()函数创建。在onMounted钩子函数中，可以通过myRef.value获取到ref元素的DOM节点，从而获取offsetHeight属性。

相关问题

vue3 获取dom的offsetHeight

在Vue 3中，可以使用`ref`来获取DOM元素的`offsetHeight`。首先，你需要在`setup`函数中创建一个`ref`对象来引用DOM元素。然后，在`onMounted`钩子函数中，你可以通过`ref.value.offsetHeight`来获取DOM元素的高度。下面是一个示例代码：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const goodInfo = ref(null)

    onMounted(() => {
      console.log(goodInfo.value.offsetHeight)
    })

    return {
      goodInfo
    }
  }
}

在上面的代码中，我们创建了一个`goodInfo`的`ref`对象来引用DOM元素。在`onMounted`钩子函数中，我们可以通过`goodInfo.value.offsetHeight`来获取DOM元素的高度。
#### 引用[.reference_title]
- *1* [Vue中获取dom元素的宽高](https://blog.csdn.net/qq_44401371/article/details/127360440)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue3.0获取虚拟dom方法](https://blog.csdn.net/vscode_js/article/details/118681134)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue 获取ref高度

在Vue中，可以使用`this.$refs`来获取组件的引用(ref)。要获取引用的高度，可以通过`$el.offsetHeight`属性来获取。例如，如果你有一个组件引用名为"searchBar"，你可以使用以下代码获取它的高度：

const searchBarHeight = this.$refs.searchBar.$el.offsetHeight;

同样地，如果你有一个组件引用名为"bottomOperateBtn"，你可以使用以下代码获取它的高度：

const bottomBtnHeight = this.$refs.bottomOperateBtn.$el.offsetHeight;

你还可以使用`window.innerHeight`来获取浏览器的可视区域高度：

const height = window.innerHeight;

最后，你可以使用`calc()`函数来计算并设置元素的高度，例如：

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 ]