[comp:image] Optimize and reconstruct image components

[typistZxd]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Refactored to tsx, optimized supplementary attributes

What does the proposed API look like?

API

IxImage

图片组件

ImageProps

继承所有 img标签属性

名称	说明	类型	默认值	全局配置	备注
src	图片地址	string	-	-	-
preview	是否开启预览	boolean	true	✅	-
onStatusChange	图片加载状态改变时触发	(status: loading|loaded|failed) => void	-	-	-

ImageSlots

名称	说明	参数类型	备注
placeholder	图片未加载的占位内容	-	-
fallback	加载失败时展示内容	-	-

IxImageViewer

图片预览组件

ImageViewerProps

名称	说明	类型	默认值	全局配置	备注
srcList	用于预览的图片链接列表	string[]	[]	-	-
activeIndex	当前激活的索引	number	0	-	-
infinite	是否无限循环	boolean	true	✅	-
closeByClickModal	是否可以通过点击遮罩层关闭预览	boolean	true	✅	-
onOpen	当图片打开时触发	() => void	-	-	-
onSwitch	当图片切换时触发，参数index为下一张图片的索引	(index: number) => void	-	-	-
onClose	当预览图片关闭时出示	() => void	-	-	-

ImageViewerSlots

名称	说明	参数类型	备注
default	默认展示，点击此展开预览图	-	-

[idux-bot]

Translation of this issue:

[Comp: Image] Optimize and Reconstruct Image Components

• i Have Searched The [https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

Refactored to Tsx, Optimized Supplementary Attributes

What does The proposed API Look Like?

API

ixImage

ImageProps

Inherit all [IMG tag properties] (https://developer.mozilla.org/en-us/docs/web/html/element/img)

Name	Description	Type	Default	Global Configuration	Remarks
SRC	Image Address	String	-	-
Fallback	Picture address showing fails	String	-	✅	-
preview	Whether to open a preview	Boolean	True	✅
Objectfit	Determines how to adapt to the container box	` Fill \	contain \	Cover \	None \
OnStatusChange	Image Load Status Change Trigger	` (STATUS: Loading \	loading \	failed) => void`	-

ixImageviewer

ImageViewerProps

Name	Description	Type	Default	Global Configuration	Remarks
Srclist	Photo Link List for Preview	String []	[]	-
ActiveIndex	Current activation	string	-	-	-
Infinite	Whether an infinite loop	Boolean	True	✅
ClosebyClickModal	Can you close preview by clicking Mask Level	Boolean	True	✅
onopen	Trigger when the picture is opened	() => void	-	-
onswitch	Trigger when the image switches, parameter index is the index of the next picture	(Index: Number) => void	-	-
onclose	Preview when the picture is closed	() => void	-	-

ImageViewerslots

Name	Description	Parameter Type	Remarks
Default	Default display, click here to expand preview	-	-

[danranVm]

• IxImage

  • onStatusChange 拆成 2 个吧，onError，onLoad。 loding 这个不要了
  • preview => viewer ?

• IxImageViewer

  • activeIndex 支持一下 v-model
  • srcList => images
  • infinite => loop
  • closeByClickModal => maskClosable, 参考 modal
  • 新增 mask，target， 参考 modal
  • 移除 onSwitch，被 onUpdate:activeIndex 取代了。