| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="图片预览示例"> |
| 2f6253 | 3 | <Alert message="有预览图" type="info" /> |
| 陈 | 4 | <div class="flex justify-center mt-4"> |
| 5 | <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" /> | |
| 6 | </div> | |
| e6093a | 7 | <Alert message="无预览图" type="info" /> |
| 陈 | 8 | <a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button> |
| 31ff05 | 9 | </PageWrapper> |
| 2f6253 | 10 | </template> |
| 陈 | 11 | <script lang="ts"> |
| 12 | import { defineComponent } from 'vue'; | |
| 13 | import { Alert } from 'ant-design-vue'; | |
| 14 | import { createImgPreview } from '/@/components/Preview/index'; | |
| 31ff05 | 15 | import { PageWrapper } from '/@/components/Page'; |
| V | 16 | |
| 2f6253 | 17 | const imgList: string[] = [ |
| 陈 | 18 | 'https://picsum.photos/id/66/346/216', |
| 19 | 'https://picsum.photos/id/67/346/216', | |
| 20 | 'https://picsum.photos/id/68/346/216', | |
| 21 | ]; | |
| 22 | export default defineComponent({ | |
| 31ff05 | 23 | components: { Alert, PageWrapper }, |
| 2f6253 | 24 | setup() { |
| 陈 | 25 | function handleClick(img: string) { |
| 26 | createImgPreview({ imageList: [img] }); | |
| 27 | } | |
| e6093a | 28 | |
| 陈 | 29 | function handlePreview() { |
| 30 | createImgPreview({ imageList: imgList }); | |
| 31 | } | |
| 32 | return { imgList, handleClick, handlePreview }; | |
| 2f6253 | 33 | }, |
| 陈 | 34 | }); |
| 35 | </script> | |
