vue3怎么获取一个盒子的高度

你可以使用 Vue 3 中的 `ref` 和 `onMounted` 来获取一个盒子的高度。下面是一个示例代码：

<template>
  <div ref="box" style="height: 200px; background-color: gray;"></div>
</template>

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

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

    onMounted(() => {
      const boxHeight = box.value.offsetHeight;
      console.log('盒子的高度：', boxHeight);
    });

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

在模板中，我们使用 `ref` 将 `div` 元素绑定到 `box` 变量上。然后，在 `onMounted` 钩子函数中，我们可以通过 `box.value.offsetHeight` 来获取盒子的高度。最后，我们将盒子的高度输出到控制台上。

请注意，在 Vue 3 中，我们使用了 Composition API 来编写组件逻辑。

相关问题

Vue3 获取盒子高度

在 Vue 3 中，你可以使用 `ref` 和 `onMounted` 来获取盒子的高度。下面是一个简单的示例：

<template>
  <div ref="box" class="box">
    <!-- 内容 -->
  </div>
</template>

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

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

    onMounted(() => {
      const height = box.value.offsetHeight;
      console.log('盒子高度：', height);
    });

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

<style>
.box {
  /* 样式 */
}
</style>

在上面的示例中，我们使用了 `ref(null)` 创建了一个 `box` 引用，然后在 `onMounted` 钩子函数中通过 `box.value.offsetHeight` 获取了盒子的高度，并进行了输出。你可以根据自己的需求进行进一步处理或使用该高度。

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>