TUI

<template>
  <TsButton @click="imagePreview = true">打开预览</TsButton>
  <TsImagePreview v-model="imagePreview" :list="['https://www.timeszit.cn/tms/file?filename=articleCover2025-06-27-14-11-34evOCu.jpeg']" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsImagePreview } from 'tui';

const imagePreview = ref(false);
</script>

<template>
  <TsButton @click="imageIndexPreview = true">打开预览</TsButton>
  <TsImagePreview
    v-model="imageIndexPreview"
    :index="previewIndex"
    :list="['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']"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsImagePreview } from 'tui';

const imageIndexPreview = ref(false);
const previewIndex = ref(1);
</script>

<template>
  <TsButton @click="imageIndexPreview = true">打开预览</TsButton>
  <TsImagePreview
    v-model="imageIndexPreview"
    :maskClose="true"
    :index="previewIndex"
    :list="['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']"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsImagePreview } from 'tui';

const imageIndexPreview = ref(false);
const previewIndex = ref(1);
</script>