vue监听浏览器窗口

Vue.js 是一种用于构建用户界面的渐进式前端框架，它允许开发者通过声明式的绑定将数据与 UI 进行关联。对于监听浏览器窗口的操作，Vue 提供了多种方法来进行响应式处理。

### 监听浏览器窗口操作

在 Vue 中，你可以直接在组件的 `mounted` 或者 `created` 生命周期钩子中监听一些全局事件，如滚动、大小改变等。下面是一些常见的浏览器窗口操作及其在 Vue 中的实现示例：

#### 监听滚动事件

export default {
  mounted() {
    window.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll(event) {
      // 当页面滚动时执行的操作
      console.log('Page is scrolled!');
      // 可以在这里添加更多的处理逻辑
    }
  }
}

#### 监听窗口尺寸变化

使用 `resize-event` 插件可以更容易地监听窗口尺寸变化：

1. 首先安装插件：

   npm install resize-event

2. 引入并使用：

   import ResizeEvent from 'resize-event';

   export default {
     data() {
       return {
         width: null,
         height: null
       };
     },
     mounted() {
       new ResizeEvent('.my-component').subscribe(({width, height}) => {
         this.width = width;
         this.height = height;
       });
     }
   }

### 使用 Vue 的自定义指令监听特定元素的尺寸变化

// 定义自定义指令
Vue.directive('on-resize', {
  inserted: function (el, binding, vnode) {
    const { value } = binding;
    el.addEventListener('resize', value);
    
    // 清理函数，当组件销毁时移除事件监听
    vnode.context.$once('hook:beforeDestroy', () => {
      el.removeEventListener('resize', value);
    });
  }
});

// 在组件中使用
export default {
  directives: {
    'on-resize': Vue.directive('on-resize')
  },
  components: {},
  template: `
    <div @on-resize="handleResize">
      <!-- 其他内容 -->
    </div>
  `,
  methods: {
    handleResize() {
      console.log('Window size has been changed');
      // 在这里处理尺寸变化的具体逻辑
    }
  }
}

###