files.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <script setup lang="ts">
  2. import { Flex } from 'ant-design-vue';
  3. import { Attachments } from 'ant-design-x-vue';
  4. defineOptions({ name: 'AXAttachmentFiles' });
  5. const filesList = [
  6. {
  7. uid: '1',
  8. name: 'excel-file.xlsx',
  9. size: 111111,
  10. },
  11. {
  12. uid: '2',
  13. name: 'word-file.docx',
  14. size: 222222,
  15. },
  16. {
  17. uid: '3',
  18. name: 'image-file.png',
  19. size: 333333,
  20. },
  21. {
  22. uid: '4',
  23. name: 'pdf-file.pdf',
  24. size: 444444,
  25. },
  26. {
  27. uid: '5',
  28. name: 'ppt-file.pptx',
  29. size: 555555,
  30. },
  31. {
  32. uid: '6',
  33. name: 'video-file.mp4',
  34. size: 666666,
  35. },
  36. {
  37. uid: '7',
  38. name: 'audio-file.mp3',
  39. size: 777777,
  40. },
  41. {
  42. uid: '8',
  43. name: 'zip-file.zip',
  44. size: 888888,
  45. },
  46. {
  47. uid: '9',
  48. name: 'markdown-file.md',
  49. size: 999999,
  50. description: 'Custom description here',
  51. },
  52. {
  53. uid: '10',
  54. name: 'image-file.png',
  55. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  56. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  57. size: 123456,
  58. },
  59. ];
  60. </script>
  61. <template>
  62. <Flex
  63. vertical
  64. gap="middle"
  65. >
  66. <Attachments.FileCard
  67. v-for="(file, index) in filesList"
  68. :key="index"
  69. :item="file"
  70. />
  71. </Flex>
  72. </template>