basic.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <script setup lang="ts">
  2. import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
  3. import { message, Button, Flex, Switch, type UploadFile } from 'ant-design-vue';
  4. import { Attachments, Sender } from 'ant-design-x-vue';
  5. import { computed, h, ref } from 'vue';
  6. defineOptions({ name: 'AXAttachmentBasic' });
  7. const fullScreenDrop = ref(false);
  8. const customContent = ref(true);
  9. const divRef = ref<HTMLDivElement>();
  10. const [messageApi, contextHolder] = message.useMessage();
  11. const handleChange = ({ file }: { file: UploadFile }) => {
  12. messageApi.info(`Mock upload: ${file.name}`);
  13. };
  14. const getDropContainer = () => (fullScreenDrop.value ? document.body : divRef.value);
  15. const attachmentsNode = computed(() => h(Attachments, {
  16. beforeUpload: () => false,
  17. onChange: handleChange,
  18. placeholder: {
  19. icon: h(CloudUploadOutlined),
  20. title: 'Drag & Drop files here',
  21. description: 'Support file type: image, video, audio, document, etc.',
  22. },
  23. children: customContent.value && h(Button, { type: 'text', icon: h(LinkOutlined) }),
  24. getDropContainer,
  25. }));
  26. </script>
  27. <template>
  28. <contextHolder />
  29. <div ref="divRef">
  30. <Flex
  31. vertical
  32. gap="middle"
  33. align="flex-start"
  34. >
  35. <Sender
  36. :prefix="attachmentsNode"
  37. />
  38. <Switch
  39. v-model:checked="fullScreenDrop"
  40. checked-children="Full screen drop"
  41. un-checked-children="Full screen drop"
  42. />
  43. <Switch
  44. v-model:checked="customContent"
  45. checked-children="use default content"
  46. un-checked-children="custom content"
  47. />
  48. </Flex>
  49. </div>
  50. </template>