pasteImage.vue 2.1 KB

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