Vue 通过组件的ref获取元素的高度。

超级大超越2023-09-14 9:19

在 Vue 中，可以通过 ref 属性获取组件的 DOM 元素。获取 DOM 元素之后，可以通过 offsetHeight 属性获取元素的高度。以下是一个示例代码：

html 复制代码

<template>
  <div>
    <div ref="myDiv">这是一个 div 元素</div>
    <button @click="getDivHeight">获取高度</button>
  </div>
</template>

<script>
export default {
  methods: {
    getDivHeight() {
      const divHeight = this.$refs.myDiv.offsetHeight;
      console.log(`div 元素的高度为：${divHeight}px`);
    },
  },
};
</script>

在上面的代码中，我们首先定义了一个 div 元素，并通过 ref 属性将它命名为 myDiv。然后，我们在 methods 中定义了 getDivHeight 方法，该方法通过 $refs 属性获取 myDiv 元素，并使用 offsetHeight 属性获取了它的高度。最后，我们将获取到的高度打印到控制台中。

当我们点击页面中的按钮时，getDivHeight 方法会被调用，它会打印出 div 元素的高度。