TUI

0.3.7
GridImages 九宫格展示效果

提供宫格对齐的图片布局效果

1张: 平铺宽度; 2张/3张: 平分宽度铺满宽度; 4张~9张: 9宫格效果。

可通过 previewable 设置是否开启预览的交互效果,但不提供直接预览,需要通过@preview自行实现

基础用法
根据图片数量生成九宫格的具体格数效果。
示例代码
vue
<template>
  <div style="width: 400px;">
    <TsGridImages :list="imageList" />
  </div>
</template>

<script setup lang="ts">
  const imageList = ['', '', '', '', '', '', '', 'https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg', 'https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-12-359Bugs.jpeg'];
</script>
基础用法
根据图片数量生成九宫格的具体格数效果。
示例代码
vue
<template>
  <div style="width: 400px;">
    <TsGridImages :list="imageList" />
  </div>
</template>

<script setup lang="ts">
  const imageList = ['', '', '', '', '', '', '', 'https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg', 'https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-12-359Bugs.jpeg'];
</script>
基础用法
根据图片数量生成九宫格的具体格数效果。
示例代码
vue
<template>
  <TsGridImages :list="imageList" :previewable="true" domain="https://www.timeszit.cn/tms/file?filename=" />
</template>

<script setup lang="ts">
  const imageList = ['articleCover2025-06-27-14-11-34evOCu.jpeg', 'articleCover2025-06-27-14-12-359Bugs.jpeg'];
</script>
属性 Props
属性名
说明
类型
可选值
默认值
备注
list
接收图片预览数组
Array<string>
[]
domain
图片域名
String
v0.3.5 废弃, 即将废弃⚠️
size
图片尺寸
String | Number | [String | Number, String | Number]
layout
图片布局方式,auto会跟进图片数量展示合适的布局,超出9张会展示为9宫格
auto | nine-grid
auto
gap
图片间距
Number
16
previewable
是否可以预览
Boolean
false
deletable
是否可以删除
Boolean
false
事件 Events
事件名
说明
类型
preview
预览图片
index, 图片的索引
delete
删除图片
index, 图片的索引
error
图片加载失败
index, 图片的索引
插槽 Slots
插槽名
说明
备注
append
追加在末尾区域的内容, 默认继承网格的样式
v0.3.3开始支持