with-sender.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <script setup lang="ts">
  2. import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
  3. import { App, Button, Flex, Badge } from 'ant-design-vue';
  4. import { Attachments, Sender } from 'ant-design-x-vue';
  5. import { computed, ref, h } from 'vue';
  6. defineOptions({ name: 'AXAttachmentWithSender' });
  7. const open = ref(true);
  8. const items = ref([]);
  9. const text = ref('');
  10. const senderRef = ref<InstanceType<typeof Sender>>(null);
  11. const senderHeader = computed(() =>
  12. h(Sender.Header, {
  13. title: "Attachments",
  14. styles: {
  15. content: {
  16. padding: 0,
  17. },
  18. },
  19. open: open.value,
  20. onOpenChange: (v: boolean) => open.value = v,
  21. forceRender: true
  22. }, {
  23. default: () => h(Attachments, {
  24. beforeUpload: () => false,
  25. items: items.value,
  26. onChange: ({ fileList }: { fileList: any[] }) => items.value = fileList,
  27. placeholder: (type: string) => type === 'drop'
  28. ? { title: 'Drop file here' }
  29. : {
  30. icon: h(CloudUploadOutlined),
  31. title: 'Upload files',
  32. description: 'Click or drag files to this area to upload',
  33. },
  34. getDropContainer: () => senderRef.value?.nativeElement
  35. })
  36. })
  37. );
  38. const badgeNode = computed(() =>
  39. h(Badge, { dot: items.value.length > 0 && !open.value }, {
  40. default: () => h(Button, {
  41. onClick: () => open.value = !open.value,
  42. icon: h(LinkOutlined)
  43. })
  44. })
  45. );
  46. </script>
  47. <template>
  48. <Flex
  49. style="min-height: 250px"
  50. align="flex-end"
  51. >
  52. <Sender
  53. ref="senderRef"
  54. :header="senderHeader"
  55. :prefix="badgeNode"
  56. :value="text"
  57. @change="v => text.value = v"
  58. @submit="() => {
  59. items.value = [];
  60. text.value = '';
  61. }"
  62. />
  63. </Flex>
  64. </template>