vue 获取dom加载后的宽度

在Vue中，我们可以通过以下两种方式获取DOM元素的宽度：

1. 通过ref获取dom节点并获取宽度：

我们可以在需要获取宽度的元素上使用ref属性，然后在mounted钩子函数中通过$refs来获取该元素的DOM节点。然后再通过offsetWidth属性获取宽度，最后把获取到的宽度存入data中。

示例代码如下：

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

<script>
  export default {
    data () {
      return {
        width: 0,
      }
    },
    mounted () {
      this.width = this.$refs.box.offsetWidth;
    }
  }
</script>

2. 使用$nextTick获取dom宽度：

我们可以在mounted钩子函数中使用$nextTick方法，在DOM更新之后获取元素的宽度。

示例代码如下：

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

<script>
  export default {
    data () {
      return {
        width: 0,
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.width = this.$refs.box.offsetWidth;
      });
    }
  }
</script>

这两种方法都可以获取DOM元素的宽度，具体使用哪种方式可以根据实际情况选择。