README
加强版图片基础组件
@shihuo/image-component
可代替原生的 img 标签
API
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
component | 指定图片外侧容器 | string | div | ||
src | 图片地址 | 必填 | string | 可支持动态修改 | |
width | 设置图片宽度 | number | 100 | ||
height | 设置图片高度 | number | 不设置默认图片自动适应高度 | ||
objectFit | 图片裁剪模式 | Enum | scale-down | contain | cover | fill | none | revert | scale-down |
|
imageRef | 图片标签引用 | { current: img } | |||
onLoad | 图片加载成功回调 | function | args: image: 图片dom对象 naturalWidth 原始宽度 naturalHeight 原始高度 renderWidth 渲染宽度 renderHeight 渲染高度 ...包含其他dom属性 |
||
onError | 图片加载失败回调 | ||||
hasBorder | 显示边框 | boolean | false | v1.1.1 | |
toolbar | 显示工具栏 | boolean | false | v1.1.1 | |
hasPreview | 显示预览工具 | boolean | true | v1.1.1 | |
onPreview | 预览回调 | function | v1.1.1 默认新开窗口显示图片 | ||
hasEdit | 显示编辑工具 | boolean | true | v1.1.1 | |
onEdit | 编辑回调 | function | v1.1.1 | ||
hasDelete | 显示删除工具 | boolean | true | v1.1.1 | |
onDelete | 删除回调 | function | v1.1.1 | ||
renderToolbar | 自定义渲染工具栏 | function | v1.1.1 |