vue.js如何获取一个可变的宽度

admin 2026年02月24日 10:42 103 0

在Vue.js中获取可变宽度，可通过ref绑定DOM元素，在mounted或updated钩子中通过this.$refs.elementRef.clientWidth获取初始宽度，若需动态响应宽度变化，可结合ResizeObserver监听元素尺寸，将回调中的宽度更新到响应式数据（如data中的width），示例：`，在mounted中const width = this.$refs.box.clientWidth，并使用this.width = width存储，动态场景下，通过new ResizeObserver(entries => this.width = entries[0].contentRect.width)`监听，确保宽度实时更新。

Vue.js 中获取可变宽度的完整指南：从基础到实践

在 Vue.js 开发中，获取元素的宽度是一个常见需求，尤其是在实现响应式布局、动态组件、拖拽调整、图表自适应等场景时，由于元素的宽度可能因窗口大小变化、内容动态加载、父容器布局调整等因素而改变，单纯依赖初始渲染时的宽度值往往无法满足需求，本文将详细介绍在 Vue.js 中获取可变宽度的多种方法，从基础的原生操作到 Vue 响应式特性结合，再到实践中的注意事项,助你灵活应对各种场景。

基础方法：通过 ref 获取 DOM 元素并读取宽度

Vue 提供了 ref 指令，允许我们在模板中为 DOM 元素或子组件添加引用，从而在 JavaScript 中直接操作它们，这是获取元素宽度最基础的方式,适合一次性获取或手动触发更新的场景。

使用 `ref` 绑定 DOM 元素

在模板中，为需要获取宽度的元素添加 ref 属性：

<template>
  <div>
    <div ref="targetElement" class="resizable-box">
      这是一段可能改变宽度的内容
    </div>
    <p>当前宽度：{{ width }}px</p>
  </div>
</template>

在组件中读取宽度

在 Vue 2 的 options API 中，可以通过 this.$refs 访问 ref 绑定的元素；在 Vue 3 的 composition API 中，则需要通过 ref 创建响应式引用，并通过 templateRef 获取 DOM 元素。

Vue 2（Options API）示例：

export default {
  data() {
    return {
      width: 0
    }
  },
  mounted() {
    this.updateWidth()
  },
  methods: {
    updateWidth() {
      // 通过 this.$refs 获取 DOM 元素
      const element = this.$refs.targetElement
      if (element) {
        this.width = element.offsetWidth // 或 clientWidth
      }
    }
  }
}

Vue 3（Composition API）示例：

import { ref, onMounted } from 'vue'
export default {
  setup() {
    const targetElement = ref(null) // 创建模板引用
    const width = ref(0)
    const updateWidth = () => {
      if (targetElement.value) {
        width.value = targetElement.value.offsetWidth
      }
    }
    onMounted(() => {
      updateWidth()
    })
    return {
      targetElement,
      width,
      updateWidth
    }
  }
}

关键属性选择：`offsetWidth` vs `clientWidth`

offsetWidth：元素的布局宽度，包括内容、内边距（padding）和边框（border），不包括外边距（margin）。
clientWidth：元素的内部宽度，包括内容 + padding，不包括 border 和 margin。

根据需求选择，例如需要包含边框的宽度时用 offsetWidth，需要纯内容+padding宽度时用 clientWidth。

实际应用场景示例

假设我们需要创建一个自适应的文本输入框,其宽度根据内容动态变化：

<template>
  <div class="auto-input-container">
    <input 
      ref="inputElement" 
      v-model="inputValue" 
      @input="adjustWidth"
      placeholder="输入内容查看宽度变化"
    />
    <span class="width-display">{{ currentWidth }}px</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      currentWidth: 0
    }
  },
  methods: {
    adjustWidth() {
      if (this.$refs.inputElement) {
        // 设置最小宽度为占位符的宽度
        this.$refs.inputElement.style.width = '150px'
        // 根据内容宽度调整
        this.currentWidth = this.$refs.inputElement.scrollWidth
        this.$refs.inputElement.style.width = `${this.currentWidth}px`
      }
    }
  }
}
</script>
<style>
.auto-input-container {
  display: inline-block;
  position: relative;
}
.auto-input-container input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.width-display {
  position: absolute;
  top: -25px;
  right: 0;
  font-size: 12px;
  color: #666;
}
</style>

监听宽度变化：使用 `ResizeObserver` 实现动态响应

基础方法只能获取当前宽度，但如果元素的宽度会因窗口调整、内容变化、父容器布局改变等动态变化，就需要持续监听宽度变化并更新数据。ResizeObserver 是现代浏览器提供的原生 API，专门用于监听元素尺寸变化，比传统的 window.resize + window.getComputedStyle 更高效精准。

`ResizeObserver` 基本用法

ResizeObserver 接收一个回调函数，当监听的元素尺寸变化时，回调会触发，并传入 ResizeObserverEntry 对象,其中包含元素的新尺寸信息。

Vue 2（Options API）封装监听逻辑：

export default {
  data() {
    return {
      width: 0,
      resizeObserver: null
    }
  },
  mounted() {
    this.initResizeObserver()
  },
  beforeDestroy() {
    // 组件销毁时断开监听，避免内存泄漏
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
    }
  },
  methods: {
    initResizeObserver() {
      const element = this.$refs.targetElement
      if (!element) return
      this.resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          // entry.contentRect 包含元素的新尺寸信息
          this.width = Math.round(entry.contentRect.width)
        }
      })
      this.resizeObserver.observe(element)
    }
  }
}

Vue 3（Composition API）封装监听逻辑：

import { ref, onMounted, onUnmounted } from 'vue'
export default {
  setup() {
    const targetElement = ref(null)
    const width = ref(0)
    let resizeObserver = null
    const initResizeObserver = () => {
      if (!targetElement.value) return
      resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          width.value = Math.round(entry.contentRect.width)
        }
      })
      resizeObserver.observe(targetElement.value)
    }
    onMounted(() => {
      initResizeObserver()
    })
    onUnmounted(() => {
      if (resizeObserver) {
        resizeObserver.disconnect()
      }
    })
    return {
      targetElement,
      width
    }
  }
}

`ResizeObserver` 的优势

精准监听：仅监听目标元素及其子孙元素的尺寸变化,不会误触发无关元素。
性能友好：采用异步回调,避免频繁计算导致的性能问题。
兼容性：现代浏览器（Chrome、Firefox、Edge、Safari）均支持，IE 不支持（需要 polyfill）。

高级应用：自定义响应式宽度指令

为了更方便地在项目中使用宽度监听,我们可以创建一个自定义指令：

// Vue 2 版本
const resizeDirective = {
  inserted(el, binding, vnode) {
    const { value: callback } = binding
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        callback(entry.contentRect.width)
      }
    })
    observer.observe(el)
    // 存储 observer 以便后续销毁
    el._resizeObserver = observer
  },
  unbind(el) {
    if (el._resizeObserver) {
      el._resizeObserver.disconnect()
    }
  }
}
// Vue 3 版本
const resizeDirective = {
  mounted(el, { value: callback }) {
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        callback(entry.contentRect.width)
      }
    })
    observer.observe(el)
    el._resizeObserver = observer
  },
  unmounted(el) {
    if (el._resizeObserver) {
      el._resizeObserver.disconnect()
    }
  }
}

使用示例：

<template>
  <div v-resize="handleResize"

标签： #js #获取 #宽度 #可变