TUI

<template>
  <div class="component-card-demo-wrap grid-images-demo-base">
    <TsGridImages :images="imageList" @preview="handlePreview" />
  </div>
</template>

<script setup lang="ts">
import { TsGridImages } from 'tui';

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',
];

const handlePreview = (index: number) => {
  console.log(index);
};
</script>

<style scoped>
.grid-images-demo-base {
  width: 400px;
}
</style>

<template>
  <div class="component-card-demo-column grid-images-demo-layout">
    <TsGridImages :images="oneGridImageList" layout="nine-grid" />
    <div class="grid-images-demo-divider"></div>
    <TsGridImages :images="twoGridImageList" layout="nine-grid" />
  </div>
</template>

<script setup lang="ts">
import { TsGridImages } from 'tui';

const oneGridImageList = ['https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg'];

const twoGridImageList = [
  '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>

<style scoped>
.grid-images-demo-layout {
  width: 400px;
}

.grid-images-demo-divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
</style>

<template>
  <div class="component-card-demo-wrap grid-images-demo-fallback">
    <TsGridImages fallback="加载失败" :images="threeGridImageList" @preview="handlePreview" />
  </div>
</template>

<script setup lang="ts">
import { TsGridImages } from 'tui';

const threeGridImageList = [
  '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',
  '',
];

const handlePreview = (index: number) => {
  console.log(index);
};
</script>

<style scoped>
.grid-images-demo-fallback {
  width: 400px;
}
</style>