TUI

GridImages 九宫格展示效果
提供宫格对齐的图片布局效果。
1 张: 平铺宽度; 2 张/3 张: 平分宽度铺满宽度; 4 张 ~ 9 张: 9 宫格效果。
可通过 previewable 设置是否开启预览的交互效果,但不提供直接预览,需要通过 @preview 自行实现。
基础用法
根据图片数量生成九宫格的具体格数效果。
示例代码
vue
布局用法
通过 layout 设置九宫格的布局。
示例代码
vue
Fallback 用法
通过配置 fallback 属性或插槽设置图片加载失败的占位展示。
加载失败
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
list
接收图片预览数组
string[]
[]
removed 0.5.1
images
接收图片预览数组
string[]
[]
added 0.5.1
size
图片尺寸
string | number | [string | number, string | number]
layout
图片布局方式, auto 会根据图片数量展示合适的布局,超出 9 张会展示为 9 宫格
auto | nine-grid
auto
gap
图片间距
number
16
previewable
是否可以预览
boolean
false
deprecated 0.5.1
deletable
是否可以删除
boolean
false
deprecated 0.5.1
fallback
加载失败文本
string
-
加载失败
added 0.5.2
事件 Events
事件名
说明
回调参数
版本说明
preview
预览图片
index, 图片的索引
delete
删除图片
index, 图片的索引
error
图片加载失败
index, 图片的索引
插槽 Slots
插槽名
说明
版本说明
append
追加在末尾区域的内容, 默认继承网格的样式
added 0.3.3
fallback
加载失败内容
added 0.5.2
基础用法
布局用法
Fallback 用法
属性 Props
事件 Events
插槽 Slots