ImageGrid 图片网格
介绍
网格布局展示图片，可等比宽高展示、自定义一行展示数量。
基础用法
通过 images 属性来设置图片列表。
html
<vd-image-grid :images="images" />ts
const images = ref([...]);一行展示列数
通过 columns 属性来设置一行展示的列数。
html
<vd-image-grid :images="images" :columns="4" />ts
const images = ref([...]);自定义高宽，行/列间距
通过 height 属性来设置图片高度，row-gap 属性来设置行间距，column-gap 属性来设置列间距。
TIP
当 height 传入百分比的值，将认为是相对宽度的比例，如 20% = width * 0.2
html
<vd-image-grid
:images="images"
height="80"
row-gap="16"
column-gap="16"
/>ts
const images = ref([...]);API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 列数 | string | number | 3 |
| height | 高度 | string | number | '100%' |
| radius | 边框半径 | string | number | 4 |
| row-gap | 行间距 | string | number | 8 |
| column-gap | 列间距 | string | number | 8 |
| grid-transition | 载入动画 | TransitionName | 'none' |
| grid-transition-duration | 载入动画持续时间 | TransitionDuration | 400 |
| sortable | 是否可拖拽排序 | boolean | false |
| sort-target | 是否展示排序目标占位 | boolean | false |
| images | 图片列表 | string[] | - |
| mode | 图片裁剪、缩放的模式 | ImageMode | 'scaleToFill' |
| icon-size | 加载中、加载错误图标大小 | string | number | - |
| loading-type | 加载中类型，同 loading 组件 | LoadingType | - |
| preview | 是否展示图片预览 | boolean | true |
| preview-name | 图片预览名称，指定已有的图片预览，不指定使用当前组件内部的图片预览 | string | - |
代替原始 Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| custom-id | 根节点id | string | - |
| custom-class | 根节点类名 | ClassValue | - |
| custom-style | 根节点样式 | StyleValue | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | MouseEvent |
| click-view | 点击视图时触发 | ImageGridOnClickViewEvent |
| resize | 尺寸更新时触发 | NodeSize |
| sort-start | 排序开始时触发 | ImageGridOnSortStartEvent |
| sort-change | 排序改变时触发 | ImageGridOnSortChangeEvent |
| sort-end | 排序结束时触发 | ImageGridOnSortEndEvent |
Slots
| 名称 | 说明 |
|---|---|
| view | 图片视图 |