vue js 获取盒子的高度

你可以使用 Vue.js 的 `ref` 属性来获取一个元素的高度。`ref` 允许你为元素添加一个引用，然后在 Vue 实例中使用 `$refs` 来获取该元素的引用。

例如，假设你有一个元素如下：

<div ref="myBox">这是一个盒子</div>

你可以在 Vue 实例中使用 `$refs` 来获取该元素的引用，如下所示：

new Vue({
  el: '#app',
  mounted() {
    const height = this.$refs.myBox.offsetHeight;
    console.log('盒子的高度是：', height);
  }
})

在上面的代码中，`mounted` 生命周期钩子函数会在 Vue 实例挂载到页面上之后被调用。在该函数中，我们使用 `this.$refs.myBox` 来获取元素的引用，然后使用 `offsetHeight` 属性来获取该元素的高度。最后，我们将高度打印到控制台中。

相关问题

Vue3 获取盒子高度

要获取盒子的高度，你可以使用 Vue3 中的 ref 和 onMounted 钩子函数配合使用。以下是一个示例代码：

<template>
  <div ref="box" class="box"></div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    const box = ref(null);

    onMounted(() => {
      // 在组件挂载后获取盒子高度
      const height = box.value.offsetHeight;
      console.log(height);
    });

    return {
      box
    };
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 200px;
  background-color: red;
}
</style>

在上面的代码中，我们使用 ref 创建了一个名为 box 的响应式引用。然后，在 onMounted 钩子函数中，我们通过 box.value 来访问 DOM 元素，并使用 offsetHeight 属性获取盒子的高度。最后，我们将盒子的高度打印到控制台中。

注意，为了获取盒子的高度，我们需要在组件挂载后才能访问 DOM 元素，所以我们使用了 onMounted 钩子函数。

vue3动态获取盒子高度

在Vue3中，可以使用`ref`和`onMounted`来动态获取盒子高度。具体步骤如下：

1. 在模板中使用`ref`给盒子元素命名

<template>
  <div class="box" ref="box"></div>
</template>

2. 在组件中导入`ref`和`onMounted`

import { ref, onMounted } from 'vue'

3. 在组件中使用`ref`创建一个响应式对象来引用盒子元素

export default {
  setup() {
    const box = ref(null)
    // ...
  }
}

4. 在`onMounted`生命周期钩子函数内，使用`clientHeight`获取盒子高度

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

    onMounted(() => {
      console.log(box.value.clientHeight)
    })

    return {
      box
    }
  }
}

完整代码如下：

<template>
  <div class="box" ref="box"></div>
</template>

<script>
import { ref, onMounted } from 'vue'

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

    onMounted(() => {
      console.log(box.value.clientHeight)
    })

    return {
      box
    }
  }
}
</script>

<style>
.box {
  width: 200px;
  height: 300px;
  background-color: pink;
}
</style>