Vue3、TypeScript 实现图片数量及大小随宽度自适应调整

在Vue3中结合 TypeScript 使用图片数量及大小随宽度自适应调整，通常涉及到响应式设计和计算属性。你可以这样做：

1. 首先，在组件中引入Vue的`ref`来创建宽度变量，例如，`widthRef`用于跟踪容器的宽度变化。

import { ref } from 'vue';

export default {
  setup() {
    const widthRef = ref<number>(0);
    //...
  }
}

2. 然后，为图片列表定义一个数组，并在模板中使用动态绑定的方式展示图片。每个图片元素的宽度可以根据容器宽度自动调整，比如通过CSS的百分比布局：

<template>
  <div :style="{ maxWidth: '100%', flexShrink: 0 }" ref="container">
    <img v-for="(image, index) in images" :key="index" :src="image.src" :style="{ maxWidth: `${100 / images.length}%`, height: 'auto' }" />
  </div>
</template>

3. 计算数组长度和每张图的宽度，确保图片数量可以动态改变，当宽度发生变化时，自动调整图片数量和尺寸。可以在`mounted`或`watch`生命周期钩子中监听宽度变化并更新图片数组：

setup() {
  //...

  watch(widthRef, (newWidth) => {
    if (newWidth !== widthRef.value) {
      // 根据新的宽度动态调整图片数量（这里假设最大显示5张）
      const adjustedImages = Array(Math.min(5, Math.floor(newWidth / 100 * images.length)));
      this.images = adjustedImages;
    }
  });

  //...
}