qm-vnit-vueImagePreviewGroup 图片展示
可预览的图片集合。
何时使用
- 需要展示图片时使用。
- 需要预览图片时使用。
代码演示
案例一
vue
<script setup lang="ts">
import { ref } from 'vue';
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 { Image, ImagePreviewGroup } from '@/library';
const imgs = ref([img1, img2, img3]);
setTimeout(() => imgs.value.push(img4), 5000);
</script>
<template>
<ImagePreviewGroup :bordered="false">
<template v-for="img in imgs" :key="img">
<Image :src="img" style="margin: 0; width: 200px; height: 200px" class="sxx" />
</template>
</ImagePreviewGroup>
</template><script setup lang="ts">
import { ref } from 'vue';
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 { Image, ImagePreviewGroup } from '@/library';
const imgs = ref([img1, img2, img3]);
setTimeout(() => imgs.value.push(img4), 5000);
</script>
<template>
<ImagePreviewGroup :bordered="false">
<template v-for="img in imgs" :key="img">
<Image :src="img" style="margin: 0; width: 200px; height: 200px" class="sxx" />
</template>
</ImagePreviewGroup>
</template>案例二
vue
<script setup lang="ts">
import { ImagePreviewGroup } from '../../library';
import img1 from '../../assets/images/1.jpg';
import img2 from '../../assets/images/2.png';
import img3 from '../../assets/images/3.webp';
</script>
<template>
<ImagePreviewGroup bordered :options="[img1, img2, img3]" />
</template><script setup lang="ts">
import { ImagePreviewGroup } from '../../library';
import img1 from '../../assets/images/1.jpg';
import img2 from '../../assets/images/2.png';
import img3 from '../../assets/images/3.webp';
</script>
<template>
<ImagePreviewGroup bordered :options="[img1, img2, img3]" />
</template>ImagePreviewGroup API
| propName | description | type | default value |
|---|---|---|---|
| bordered | 图片是否含有边框 | boolean | - |
| options | 图片的集合 | string[] | - |
| 其他 | 其他属性将直接透传给ImagePreviewGroup组件的根节点 | - | - |