vue3使用resize做大屏适配

Vue3中使用`resize`进行大屏适配，可以使用Vue3提供的`onMounted`和`onUnmounted`钩子函数来监听窗口大小变化。

首先，在组件中引入`onMounted`和`onUnmounted`：

import { onMounted, onUnmounted } from 'vue';

然后，在`onMounted`中添加窗口大小变化的监听事件：

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

其中，`handleResize`是处理窗口大小变化的函数，可以根据实际需要进行相应的处理。

最后，在`onUnmounted`中移除监听事件：

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

完整的代码示例如下：

<template>
  <div class="container" :style="{fontSize: fontSize}">
    <slot></slot>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive } from 'vue';

export default {
  name: 'AdaptiveContainer',
  setup() {
    const state = reactive({
      fontSize: '14px',
    });

    const handleResize = () => {
      const width = document.documentElement.clientWidth;
      if (width >= 1200) {
        state.fontSize = '16px';
      } else if (width >= 768) {
        state.fontSize = '14px';
      } else {
        state.fontSize = '12px';
      }
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    return {
      state,
    };
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
</style>

其中，`AdaptiveContainer`组件会根据窗口大小自适应字体大小，当窗口宽度大于等于1200px时，字体大小为16px，当窗口宽度在768px到1200px之间时，字体大小为14px，当窗口宽度小于768px时，字体大小为12px。