TUI

<template>
  <div style="width: 400px;">
    <TsGridImages :images="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>

<template>
  <TsGridImages :images="oneGirdImagelist" layout="nine-grid" />
  <div style="width: 100%; height: 1px; background-color: #ccc"></div>
  <TsGridImages :images="twoGirdImagelist" layout="nine-grid" />
</template>

<script setup lang="ts">
  const oneGirdImagelist = ['https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg'];
  const twoGirdImagelist = [ '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>

<template>
  <TsGridImages fallback="加载失败" :images="imageList" @preview="handlePreview" />
</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>