当前位置：首页 > VUE

vue项目实现resize

2026-03-08 16:58:44VUE

监听窗口大小变化

在Vue项目中监听窗口大小变化可以通过window.addEventListener实现。在组件的mounted生命周期中添加事件监听器，在beforeDestroy或unmounted中移除监听器以避免内存泄漏。

export default {
  data() {
    return {
      windowWidth: 0
    }
  },
  mounted() {
    this.windowWidth = window.innerWidth
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}

使用ResizeObserver API

对于监听DOM元素尺寸变化，推荐使用现代浏览器支持的ResizeObserver API。相比传统的resize事件，它可以更高效地监测特定元素的尺寸变化。

vue项目实现resize

export default {
  data() {
    return {
      elementWidth: 0,
      resizeObserver: null
    }
  },
  mounted() {
    const element = this.$refs.resizableElement
    this.resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        this.elementWidth = entry.contentRect.width
      }
    })
    this.resizeObserver.observe(element)
  },
  beforeDestroy() {
    this.resizeObserver.disconnect()
  }
}

响应式布局实现

结合Vue的响应式特性和CSS媒体查询，可以创建适应不同屏幕尺寸的布局。在组件中使用计算属性根据窗口宽度返回不同的样式或布局配置。

export default {
  computed: {
    layoutType() {
      if (this.windowWidth < 768) {
        return 'mobile'
      } else if (this.windowWidth < 1024) {
        return 'tablet'
      } else {
        return 'desktop'
      }
    }
  }
}

防抖优化

频繁的resize事件可能影响性能，使用防抖函数可以优化性能。Lodash的_.debounce或自定义实现都可以。

vue项目实现resize

import { debounce } from 'lodash'

export default {
  methods: {
    handleResize: debounce(function() {
      // 处理逻辑
    }, 200)
  }
}

第三方库解决方案

对于复杂场景，可以使用专门处理resize的Vue插件，如vue-resize或element-resize-detector，它们提供了更简洁的API和更好的性能。

import VueResize from 'vue-resize'
import 'vue-resize/dist/vue-resize.css'

Vue.use(VueResize)

组件内使用

在模板中可以直接绑定响应式数据到样式或类名，实现动态调整。

<template>
  <div :class="['container', layoutType]">
    <div ref="resizableElement" :style="{ width: dynamicWidth + 'px' }">
      <!-- 内容 -->
    </div>
  </div>
</template>