当前位置：首页 > VUE

vue项目实现resize

2026-03-29 04:01:56VUE

监听窗口大小变化

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

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      console.log('Window resized:', window.innerWidth, window.innerHeight);
    }
  }
};

使用Vue自定义指令

封装一个自定义指令v-resize，可以方便地在模板中直接使用。自定义指令可以绑定到组件或DOM元素上，并在窗口大小变化时触发回调。

Vue.directive('resize', {
  inserted(el, binding) {
    const onResize = binding.value;
    window.addEventListener('resize', onResize);
    el._onResize = onResize;
  },
  unbind(el) {
    window.removeEventListener('resize', el._onResize);
    delete el._onResize;
  }
});

在模板中使用：

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

使用第三方库

如果需要更复杂的响应式逻辑，可以使用第三方库如vue-resize或element-resize-detector。这些库提供了更高效的事件监听机制，尤其是对DOM元素大小的变化。

安装vue-resize：

npm install vue-resize

在组件中使用：

import { ResizeObserver } from 'vue-resize';
export default {
  components: { ResizeObserver },
  methods: {
    onResize({ width, height }) {
      console.log('Element resized:', width, height);
    }
  }
};

模板示例：

<resize-observer @notify="onResize">
  <div>Resizable content</div>
</resize-observer>

响应式设计辅助

结合CSS媒体查询和Vue的数据响应性，可以动态调整布局或样式。通过监听窗口大小变化，更新组件的data属性，从而触发模板的重新渲染。

export default {
  data() {
    return {
      windowWidth: window.innerWidth
    };
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth;
    });
  },
  computed: {
    isMobile() {
      return this.windowWidth < 768;
    }
  }
};

模板中根据条件渲染：

<template>
  <div :class="{ 'mobile-layout': isMobile }">Content</div>
</template>

性能优化

高频的resize事件可能影响性能，可以通过防抖（debounce）或节流（throttle）减少事件处理频率。使用lodash的防抖函数或手动实现。

示例代码：

vue项目实现resize

import { debounce } from 'lodash';
export default {
  methods: {
    handleResize: debounce(function() {
      console.log('Debounced resize event');
    }, 200)
  }
};