Skip to content

PreviewImage 图片

可预览图片。

何时使用

  • 需要预览图片时使用。

代码演示

案例一

vue
<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { PreviewImage } from '@/library';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.png';
import img3 from '@/assets/images/3.webp';
import img4 from '@/assets/images/4.jpg';
import img5 from '@/assets/images/5.jpg';
import img6 from '@/assets/images/6.jpg';
import img7 from '@/assets/images/7.webp';
import img8 from '@/assets/images/8.jpeg';
import img9 from '@/assets/images/9.webp';
import img10 from '@/assets/images/10.webp';

const imgs = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10];
const index = ref(0);
const showModal = ref(false);
</script>
<template>
  <Button @click="showModal = true">预览</Button>

  <PreviewImage :imgs="imgs" :index="index" :open="showModal" @close="showModal = false" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { PreviewImage } from '@/library';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.png';
import img3 from '@/assets/images/3.webp';
import img4 from '@/assets/images/4.jpg';
import img5 from '@/assets/images/5.jpg';
import img6 from '@/assets/images/6.jpg';
import img7 from '@/assets/images/7.webp';
import img8 from '@/assets/images/8.jpeg';
import img9 from '@/assets/images/9.webp';
import img10 from '@/assets/images/10.webp';

const imgs = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10];
const index = ref(0);
const showModal = ref(false);
</script>
<template>
  <Button @click="showModal = true">预览</Button>

  <PreviewImage :imgs="imgs" :index="index" :open="showModal" @close="showModal = false" />
</template>

案例二(可预览超大图)

为模拟展示超大图片的缓慢加载,建议先将 network 设置成 Fast 3G,再进行预览

vue
<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { PreviewImage } from '@/library';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.png';
import img3 from '@/assets/images/3.webp';
import img4 from '@/assets/images/4.jpg';
import img5 from '@/assets/images/5.jpg';
import img6 from '@/assets/images/6.jpg';
import img7 from '@/assets/images/7.webp';
import img8 from '@/assets/images/8.jpeg';
import img9 from '@/assets/images/9.webp';
import img10 from '@/assets/images/10.webp';

const { SuperPreviewImage } = PreviewImage;
// url 表示要展示的缩略图,hdUrl 表示要预览的高清图
const superImgs = [
  { url: img1, hdUrl: img6 },
  { url: img2, hdUrl: img7 },
  { url: img3, hdUrl: img8 },
  { url: img4, hdUrl: img9 },
  { url: img5, hdUrl: img10 },
];

const index = ref(0);
const showModal = ref(false);
</script>
<template>
  <Button @click="showModal = true">预览</Button>

  <SuperPreviewImage :pageSize="3" :index="index" :imgs="superImgs" :open="showModal" @close="showModal = false" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { PreviewImage } from '@/library';
import img1 from '@/assets/images/1.jpg';
import img2 from '@/assets/images/2.png';
import img3 from '@/assets/images/3.webp';
import img4 from '@/assets/images/4.jpg';
import img5 from '@/assets/images/5.jpg';
import img6 from '@/assets/images/6.jpg';
import img7 from '@/assets/images/7.webp';
import img8 from '@/assets/images/8.jpeg';
import img9 from '@/assets/images/9.webp';
import img10 from '@/assets/images/10.webp';

const { SuperPreviewImage } = PreviewImage;
// url 表示要展示的缩略图,hdUrl 表示要预览的高清图
const superImgs = [
  { url: img1, hdUrl: img6 },
  { url: img2, hdUrl: img7 },
  { url: img3, hdUrl: img8 },
  { url: img4, hdUrl: img9 },
  { url: img5, hdUrl: img10 },
];

const index = ref(0);
const showModal = ref(false);
</script>
<template>
  <Button @click="showModal = true">预览</Button>

  <SuperPreviewImage :pageSize="3" :index="index" :imgs="superImgs" :open="showModal" @close="showModal = false" />
</template>

PreviewImage API

propNamedescriptiontypedefault value
open是否展示组件booleanfalse
imgs预览的图片集合string[]-
index(v-model)默认展示第几个图片number0
pageSize指定缩略图展示列表一页可以展示多少张图片number9

SuperPreviewImage API

propNamedescriptiontypedefault value
open是否展示组件booleanfalse
imgs预览的图片集合Array<{ url:string; hdUrl:string }>-
index(v-model)默认展示第几个图片number0
pageSize指定缩略图展示列表一页可以展示多少张图片number9

PreviewImage(SuperPreviewImage) 事件

eventNamedescriptioncallback
close关闭预览弹框的事件function () {}

Released under the MIT License.