vue怎么获取当前div的宽高

Vue.js中如何获取当前div的宽高

在Vue.js中，获取当前div的宽高是一个普遍的需求。好在Vue.js提供了丰富的工具和方法来实现这个目标。

使用ref属性

我们可以使用Vue.js提供的ref属性来获取当前组件的DOM元素。ref属性作为一个指令，用于为子元素添加一个索引ID，使开发者可以在父组件中通过$refs对象引用这个子元素。

下面是一个简单的例子，展示如何通过ref获取当前div的宽高：

<template>
  <div ref="myDiv" @click="showSize">Click me to show size</div>
</template>

<script>
export default {
  methods: {
    showSize() {
      const { width, height } = this.$refs.myDiv.getBoundingClientRect();
      alert(`Width: ${width}px, Height: ${height}px`);
    }
  }
}
</script>

在上面的例子中，我们使用了Vue.js的@click指令来监听div元素的点击事件。在showSize方法中，我们可以通过this.$refs.myDiv获取到div元素的DOM对象，然后通过getBoundingClientRect()方法获取当前div元素的宽高信息。

使用Vue.js的computed属性

另外，我们也可以使用Vue.js的computed属性来获取当前div的宽高。computed属性的值会根据它所依赖的数据动态计算得出，这样我们就可以根据div元素的实际宽高来获取div元素的宽高信息。

下面是一个使用computed属性获取div宽高的例子：

<template>
  <div :style="{width: '100px', height: '100px'}" ref="myDiv"></div>
</template>

<script>
export default {
  computed: {
    divSize() {
      const { width, height } = this.$refs.myDiv.getBoundingClientRect();
      return { width, height };
    }
  },
  mounted() {
    console.log(this.divSize);
  }
}
</script>

在上面的例子中，我们使用了Vue.js的动态绑定语法将div元素的宽高预设为100px。在mounted钩子函数中，我们打印了computed属性divSize的值，发现输出了div元素的实际宽高信息。

结论

通过上述两种方法，我们可以轻松地获取当前div元素的宽高信息。使用ref属性能够快速地获取DOM对象，而且在需要动态更新宽高信息的情况下非常实用；使用computed属性能够根据实际宽高信息动态计算元素宽高，适用于静态宽高计算的情况下。这些方法都是Vue.js的常用工具，对于Vue.js的开发者来说是非常实用的技巧。