header.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <script setup lang="ts">
  2. import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
  3. import { Button, Flex, theme, Typography, message as messageAnt } from 'ant-design-vue';
  4. import { Sender } from 'ant-design-x-vue';
  5. import { ref } from 'vue';
  6. defineOptions({ name: 'AXSenderHeaderSetup' });
  7. const { token } = theme.useToken();
  8. const [message, contextHolder] = messageAnt.useMessage();
  9. const open = ref(false);
  10. const openChange = (v: boolean) => {
  11. open.value = v;
  12. }
  13. const triggerOpen = () => {
  14. open.value = !open.value;
  15. }
  16. const senderSubmit = () => {
  17. message.success('Send message successfully!');
  18. }
  19. const selectFileClick = () => {
  20. message.info('Mock select file');
  21. }
  22. </script>
  23. <template>
  24. <context-holder />
  25. <Flex
  26. style="height: 350px;"
  27. align="end"
  28. >
  29. <Sender
  30. placeholder="← Click to open"
  31. @submit="senderSubmit"
  32. >
  33. <template #header>
  34. <Sender.Header
  35. title="Upload Sample"
  36. :open="open"
  37. @open-change="openChange"
  38. >
  39. <Flex
  40. vertical
  41. align="center"
  42. gap="small"
  43. :style="{ marginBlock: token.paddingLG }"
  44. >
  45. <CloudUploadOutlined style="font-size: 4em" />
  46. <Typography.Title
  47. :level="5"
  48. style="margin: 0"
  49. >
  50. Drag file here(just demo)
  51. </Typography.Title>
  52. <Typography.Text type="secondary">
  53. Support pdf, doc, xlsx, ppt, txt, image file types
  54. </Typography.Text>
  55. <Button @click="selectFileClick">
  56. Select File
  57. </Button>
  58. </Flex>
  59. </Sender.Header>
  60. </template>
  61. <template #prefix>
  62. <Button
  63. type="text"
  64. @click="triggerOpen"
  65. >
  66. <template #icon>
  67. <LinkOutlined />
  68. </template>
  69. </Button>
  70. </template>
  71. </Sender>
  72. </Flex>
  73. </template>