vue 适配浏览器窗口大小

在Vue中，可以使用`window`对象的`resize`事件来监听浏览器窗口大小的变化，并根据窗口大小调整组件的样式。

首先，你需要在Vue组件的`mounted`生命周期钩子中添加一个事件监听器：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    mounted() {
      window.addEventListener('resize', this.handleResize)
    },
    methods: {
      handleResize() {
        // 处理窗口大小变化的逻辑
      }
    }
  }
</script>

在`handleResize`方法中，你可以根据窗口大小调整组件的样式。例如，你可以使用`window.innerWidth`和`window.innerHeight`属性获取窗口的宽度和高度，然后针对不同的窗口大小调整样式。

<template>
  <div :style="containerStyle" class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        containerStyle: {
          fontSize: '16px'
        }
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleResize)
      this.handleResize()
    },
    methods: {
      handleResize() {
        if (window.innerWidth <= 600) {
          this.containerStyle.fontSize = '14px'
        } else {
          this.containerStyle.fontSize = '16px'
        }
      }
    }
  }
</script>

在这个例子中，组件的容器样式根据窗口大小动态调整了字体大小。当窗口宽度小于等于600px时，字体大小为14px，否则为16px。

当组件销毁时，你需要记得移除窗口大小变化的事件监听器，以避免内存泄漏。

<script>
  export default {
    name: 'MyComponent',
    mounted() {
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
    },
    methods: {
      handleResize() {
        // 处理窗口大小变化的逻辑
      }
    }
  }
</script>