vue根据窗口大小适配

Vue可以根据窗口大小进行适配的方法有很多种。下面我介绍一种常用的方法：

1. 首先，你可以使用Vue的生命周期钩子函数`mounted`来监听窗口大小的变化。在mounted函数中添加以下代码：

mounted() {
  window.addEventListener('resize', this.handleResize);
}

2. 在Vue实例中添加一个`data`属性来存储窗口的宽度和高度：

data() {
  return {
    windowWidth: 0,
    windowHeight: 0
  };
},

3. 在Vue实例中添加一个`methods`方法来处理窗口大小变化的逻辑：

methods: {
  handleResize() {
    this.windowWidth = window.innerWidth;
    this.windowHeight = window.innerHeight;
    // 在这里可以根据窗口大小进行适配的操作
  }
},

4. 最后，在需要适配的地方使用`windowWidth`和`windowHeight`属性进行适配操作。例如，你可以在组件的模板中使用这些属性来动态设置样式或者进行其他操作。

<template>
  <div :style="{'width': windowWidth + 'px', 'height': windowHeight + 'px'}">
    <!-- 这里是适配后的内容 -->
  </div>
</template>

通过以上步骤，你就可以在Vue中根据窗口大小进行适配了。当窗口大小发生变化时，`handleResize`方法会被调用，从而更新`windowWidth`和`windowHeight`属性，然后在模板中使用这些属性实现适配效果。