在 Vue 中巧妙获取 DOM 元素实际宽高：全面指南

2023-12-03 23:54:40

在 Vue 中获取 DOM 元素的实际宽高

在 Vue.js 应用中，准确地获取 DOM 元素的实际宽高对于响应式设计、动态可视化和交互式组件至关重要。本文将深入探讨在 Vue 中获取 DOM 元素实际宽高所用的常用技术，并提供代码示例和最佳实践指导。

获取元素尺寸

1. 使用 ref 和 getBoundingClientRect()

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

<script>
export default {
  mounted() {
    const element = this.$refs.myElement;
    const rect = element.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
  },
};
</script>

这种方法使用 ref 指令将 Vue 组件实例中的元素引用分配给 JavaScript 变量。然后，可以使用 getBoundingClientRect() 方法获取元素相对于其偏移父元素的边界框，从而得到元素的实际宽度和高度。

2. 使用 ref 和 Vue.nextTick()

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

<script>
export default {
  mounted() {
    const element = this.$refs.myElement;
    Vue.nextTick(() => {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
    });
  },
};
</script>

这个技术与前面提到的方法类似，但它使用 Vue.nextTick() 辅助函数来推迟获取元素尺寸，直到 Vue 完成其 DOM 更新循环。这对于在元素初始渲染后可能发生变化的动态元素非常有用。

3. 监听 DOMContentLoaded 事件

<script>
export default {
  mounted() {
    document.addEventListener('DOMContentLoaded', () => {
      const element = this.$el;
      const width = element.offsetWidth;
      const height = element.offsetHeight;
    });
  },
};
</script>

这种方法侦听 DOMContentLoaded 事件，该事件在浏览器完成加载页面后触发。这可以确保在所有必需的资源加载并呈现到 DOM 中之后再获取元素尺寸。

获取窗口尺寸

1. 使用 Vue.prototype.$el

<script>
export default {
  mounted() {
    const width = this.$el.clientWidth;
    const height = this.$el.clientHeight;
  },
};
</script>

Vue 实例上的 $el 属性引用 Vue 组件所渲染的 DOM 根元素。可以使用 clientWidth 和 clientHeight 属性来获取窗口的宽度和高度，这对于获取应用程序视图区域的尺寸非常有用。

2. 使用 window.innerWidth 和 window.innerHeight

<script>
export default {
  mounted() {
    const width = window.innerWidth;
    const height = window.innerHeight;
  },
};
</script>

也可以直接使用全局 window 对象来获取窗口的宽度和高度。这对于获取应用程序运行时环境的尺寸非常有用，即使 Vue 组件不在根元素中也是如此。

考虑视口缩放

在移动设备上，获取 DOM 元素的实际宽高时必须考虑视口缩放。视口缩放比例可以通过 window.devicePixelRatio 属性获取，可以将其应用于测量值以获得准确的尺寸。

<script>
export default {
  mounted() {
    const width = element.offsetWidth * window.devicePixelRatio;
    const height = element.offsetHeight * window.devicePixelRatio;
  },
};
</script>