react-component/image

新 API 讨论

linxianxi opened this issue · 3 comments

linxianxi commented

@afc163 @zombieJ
是否改成这样形式，还是保留现在的 showOnlyInPreview：

<Image.PreviewGroup preview={{ images: ['3, '4', '5'] }}>
   <Image src='1' />
</Image.PreviewGroup>

但是在这种情况下, 要怎么对应，按 index 对应么？这里的 1 对上 3，2 对上 4？ 感觉有点怪。
https://ant.design/components/image-cn#components-image-demo-preview-group

<Image.PreviewGroup preview={{ images: ['3, '4', '5'] }}>
   <Image src='1' />
   <Image src='2' />
</Image.PreviewGroup>

并且这样预览多图会存在两种方式使用，一种原本的，还有这种。控制台提示下用最新的 images？
zombieJ commented

从 antd 的 API 统一角度看可以是这样子：

interface PreviewGroupProps {
  // ...
  items?: ImageItem[];
}

type ImageItem = string | { src: string };

当设置 items 后，无视内部元素，仅以当前 items 作为预览列表。items 本身是替换作用，不需要和 <Image /> 对应。因而可以直接这么使用：

<Image.PreviewGroup items={[...]} preview={{ visible: true }}>
  <Button {...}>Show</Button>
</Image.PreviewGroup>
  • 😄1
linxianxi commented

这种情况是什么行为，应该会显示两个缩略图吧，然后点击各自，是怎么样的

<Image.PreviewGroup items={['3', '4', '5', '6']}>
   <Image src='1' />
   <Image src='2' />
</Image.PreviewGroup>
zombieJ commented

无论点击哪个出来的都是 items[0]，items 优先高于 <Image /> 的收集。

  • 😄1