ImageSwitcher 图片组

类型定义

ImageSwitcher 类型定义

export type ImageSwitcher = {
  defaultImageId: string;
  sync: boolean;
  imageHeight?: Length;
  imageWidth?: Length;
  imageFillMethod?: Select;
};

字段说明

字段	类型	必选	描述
defaultImageId	string	是	默认图片的唯一标识符（ID）。
sync	boolean	是	同步开关，用于控制是否同步热区设置（true 为同步，false 为不同步）。
imageHeight	Length	否	默认图片的高度（如 { value: 100, unit: 'px' }）。
imageWidth	Length	否	默认图片的宽度（如 { value: 200, unit: 'px' }）。
imageFillMethod	Select	否	默认图片的填充效果（如 { options: [...], modelValue: 'cover' }）。

---

字段详细说明

1. defaultImageId

   • 必须为有效的图片资源 ID，用于指定默认显示的图片。

2. sync

   • 当设置为 true 时，图片切换会同步更新热区设置；false 时则不会影响热区。

3. imageHeight 和 imageWidth

   • 类型为 Length，支持动态单位（如 px、%、vw 等）。
   • 示例：

     imageHeight: { value: 150, unit: 'px' },
     imageWidth: { value: 300, unit: 'px' },

4. imageFillMethod

   • 类型为 Select，用于定义图片的填充方式（如“覆盖”、“适应”、“拉伸”等）。
   • 示例：

     imageFillMethod: {
       options: [
         { label: "覆盖", value: "cover" },
         { label: "适应", value: "contain" },
       ],
       modelValue: "cover",
     },

---

示例

基本配置

const switcherConfig: ImageSwitcher = {
  defaultImageId: "img-001",
  sync: true,
  imageHeight: { value: 200, unit: "px" },
  imageWidth: { value: 400, unit: "px" },
  imageFillMethod: {
    options: [
      { label: "覆盖", value: "cover" },
      { label: "适应", value: "contain" },
    ],
    modelValue: "cover",
  },
};

简化配置（仅必填字段）

const simpleSwitcher: ImageSwitcher = {
  defaultImageId: "img-002",
  sync: false,
};

---

注意事项

1. defaultImageId 的关联性
   • 需确保与实际的图片资源 ID 匹配，否则可能导致显示异常。
2. sync 的作用
   • 在需要动态调整热区时（如轮播图切换），设置为 true 可自动同步热区位置。
3. Length 单位的灵活性
   • 支持响应式单位（如 vw、%），适合适配不同屏幕尺寸。
4. Select 的扩展性
   • 可通过 options 添加更多填充效果选项，满足设计需求。

其他类型引用

• Length
• Select