with-sender.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <script setup lang="tsx">
  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 } from 'vue';
  6. defineOptions({ name: 'AXAttachmentWithSender' });
  7. const Demo = () => {
  8. const open = ref(true);
  9. const items = ref([]);
  10. const text = ref('');
  11. const senderRef = ref<InstanceType<typeof Sender>>(null);
  12. const senderHeader = computed(() => (
  13. <Sender.Header
  14. title="Attachments"
  15. styles={{
  16. content: {
  17. padding: 0,
  18. },
  19. }}
  20. open={open.value}
  21. onOpenChange={v => open.value = v}
  22. forceRender
  23. >
  24. <Attachments
  25. // Mock not real upload file
  26. beforeUpload={() => false}
  27. items={items.value}
  28. onChange={({ fileList }) => items.value = fileList}
  29. placeholder={(type) =>
  30. type === 'drop'
  31. ? {
  32. title: 'Drop file here',
  33. }
  34. : {
  35. icon: <CloudUploadOutlined />,
  36. title: 'Upload files',
  37. description: 'Click or drag files to this area to upload',
  38. }
  39. }
  40. getDropContainer={() => senderRef.value?.nativeElement}
  41. />
  42. </Sender.Header>
  43. ));
  44. const badgeNode = computed(() => (
  45. <Badge dot={items.value.length > 0 && !open.value}>
  46. <Button onClick={() => open.value = !open.value} icon={<LinkOutlined />} />
  47. </Badge>
  48. ))
  49. return (
  50. <Flex style={{ minHeight: '250px' }} align="flex-end">
  51. <Sender
  52. ref={senderRef}
  53. header={senderHeader.value}
  54. prefix={
  55. badgeNode.value
  56. }
  57. value={text.value}
  58. onChange={v => text.value = v}
  59. onSubmit={() => {
  60. items.value = []
  61. text.value = ''
  62. }}
  63. />
  64. </Flex>
  65. );
  66. };
  67. defineRender(() => {
  68. return (
  69. <App>
  70. <Demo />
  71. </App>
  72. )
  73. });
  74. </script>