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
propName | description | type | default value |
---|---|---|---|
open | 是否展示组件 | boolean | false |
imgs | 预览的图片集合 | string[] | - |
index(v-model) | 默认展示第几个图片 | number | 0 |
pageSize | 指定缩略图展示列表一页可以展示多少张图片 | number | 9 |
SuperPreviewImage API
propName | description | type | default value |
---|---|---|---|
open | 是否展示组件 | boolean | false |
imgs | 预览的图片集合 | Array<{ url:string; hdUrl:string }> | - |
index(v-model) | 默认展示第几个图片 | number | 0 |
pageSize | 指定缩略图展示列表一页可以展示多少张图片 | number | 9 |
PreviewImage(SuperPreviewImage) 事件
eventName | description | callback |
---|---|---|
close | 关闭预览弹框的事件 | function () {} |