files.vue 1.5 KB

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