placeholder.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <script setup lang="ts">
  2. import { CloudUploadOutlined } from '@ant-design/icons-vue';
  3. import { Button, Flex, Result, theme, Typography } from 'ant-design-vue';
  4. import { Attachments, type AttachmentsProps } from 'ant-design-x-vue';
  5. import { computed, type CSSProperties, ref } from 'vue';
  6. defineOptions({ name: 'AXAttachmentPlaceHolderSetup' });
  7. const presetFiles: AttachmentsProps['items'] = [
  8. {
  9. uid: '1',
  10. name: 'uploading file.xlsx',
  11. status: 'uploading',
  12. url: 'http://www.baidu.com/xxx.png',
  13. percent: 93,
  14. },
  15. {
  16. uid: '2',
  17. name: 'uploaded file.docx',
  18. status: 'done',
  19. size: 123456,
  20. description: 'Customize description',
  21. url: 'http://www.baidu.com/yyy.png',
  22. },
  23. {
  24. uid: '3',
  25. name: 'upload error with long text file name.zip',
  26. status: 'error',
  27. response: 'Server Error 500', // custom error message to show
  28. url: 'http://www.baidu.com/zzz.png',
  29. },
  30. {
  31. uid: '4',
  32. name: 'image uploading preview.png',
  33. status: 'uploading',
  34. percent: 33,
  35. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  36. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  37. },
  38. {
  39. uid: '5',
  40. name: 'image done preview.png',
  41. status: 'done',
  42. size: 123456,
  43. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  44. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  45. },
  46. {
  47. uid: '6',
  48. name: 'image error preview.png',
  49. status: 'error',
  50. response: 'Server Error 500', // custom error message to show
  51. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  52. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  53. },
  54. ];
  55. const { token } = theme.useToken();
  56. const items = ref<AttachmentsProps['items']>([]);
  57. const sharedBorderStyle = computed<CSSProperties>(() => ({
  58. borderRadius: token.value.borderRadius,
  59. overflow: 'hidden',
  60. background: token.value.colorBgContainer,
  61. }));
  62. const sharedAttachmentProps = computed<AttachmentsProps>(() => ({
  63. beforeUpload: () => false,
  64. items: items.value,
  65. onChange: ({ fileList }) => {
  66. console.log('onChange:', fileList);
  67. items.value = fileList;
  68. },
  69. }));
  70. const fillFiles = () => {
  71. items.value = presetFiles;
  72. };
  73. const resetFiles = () => {
  74. items.value = [];
  75. };
  76. </script>
  77. <template>
  78. <Flex
  79. vertical
  80. gap="middle"
  81. :style="{
  82. padding: token.padding,
  83. background: token.colorBgContainerDisabled,
  84. }"
  85. >
  86. <div :style="sharedBorderStyle">
  87. <Attachments
  88. v-bind="sharedAttachmentProps"
  89. >
  90. <template #placeholder="{ type }">
  91. <Flex
  92. v-if="type === 'inline'"
  93. align="center"
  94. justify="center"
  95. vertical
  96. gap="2"
  97. >
  98. <Typography.Text style="font-size: 30px; line-height: 1;">
  99. <CloudUploadOutlined />
  100. </Typography.Text>
  101. <Typography.Title
  102. :level="5"
  103. style="margin: 0; font-size: 14px; line-height: 1.5;"
  104. >
  105. Click or Drop files here
  106. </Typography.Title>
  107. <Typography.Text type="secondary">
  108. Support file type: image, video, audio, document, etc.
  109. </Typography.Text>
  110. </Flex>
  111. <Typography.Text v-if="type === 'drop'">
  112. Drop file here
  113. </Typography.Text>
  114. </template>
  115. </Attachments>
  116. </div>
  117. <div :style="sharedBorderStyle">
  118. <Attachments
  119. v-bind="sharedAttachmentProps"
  120. >
  121. <template #placeholder="{ type }">
  122. <Result
  123. v-if="type === 'inline'"
  124. title="Custom Placeholder Node"
  125. :style="{ padding: 0 }"
  126. >
  127. <template #icon>
  128. <CloudUploadOutlined />
  129. </template>
  130. <template #extra>
  131. <Button type="primary">
  132. Do Upload
  133. </Button>
  134. </template>
  135. </Result>
  136. <Typography.Text v-if="type === 'drop'">
  137. Drop file here
  138. </Typography.Text>
  139. </template>
  140. </Attachments>
  141. </div>
  142. <Flex gap="middle">
  143. <Button
  144. :style="{ flex: '1 1 50%' }"
  145. :disabled="!!items.length"
  146. type="primary"
  147. @click="fillFiles"
  148. >
  149. Fill Files
  150. </Button>
  151. <Button
  152. :style="{ flex: '1 1 50%' }"
  153. :disabled="!items.length"
  154. @click="resetFiles"
  155. >
  156. Reset Files
  157. </Button>
  158. </Flex>
  159. </Flex>
  160. </template>