vue3随页面变化的组件宽度

在 Vue 3 中，如果你想要让某个组件随着页面的变化而动态调整其宽度，通常可以采用响应式设计或者使用 CSS 的媒体查询（Media Queries）。以下是两种常见的实现方法：

1. **CSS 动态样式**:
- 你可以直接在组件的 CSS 部分设置 `width` 属性为百分比值，如 `width: 100%`，这样它会根据容器的大小自动调整。
- 或者，使用 `v-bind:class` 或者 `style` 特性，通过计算属性来基于窗口大小或者其他条件改变组件的样式。

<template>
  <div :style="{ width: getComponentWidth() }">
    <!-- 其他内容 -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const componentWidthRef = ref(100); // 初始宽度

// 定义计算属性获取动态宽度
function getComponentWidth() {
  return window.innerWidth > 768 ? '50%' : '100%'; // 当屏幕大于768px时宽度设为50%
}
</script>

2. **响应式布局** (如果组件有自适应的需求)：
- 使用 CSS Flexbox 或 Grid 布局，结合 Vue 的 `v-model` 或者 `ref` 实现响应式的宽度调整。
- 或者使用 Vue 的 `watch` 监听视图的尺寸变化，并相应地更新组件样式。

<template>
  <div class="flex-container" :style="{ flexBasis: componentWidth }">
    <!-- 其他内容 -->
  </div>
</template>

<script setup>
import { watch } from 'vue';
import { ref } from '@vue/composition-api';

const componentWidth = ref(window.innerWidth);
watch(() => window.innerWidth, (newWidth) => {
  componentWidth.value = Math.min(newWidth, 1200); // 设置最大宽度
});
</script>

<style scoped>
.flex-container {
  display: flex;
  /* 更多Flexbox或Grid的配置 */
}
</style>