header.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <script setup lang="tsx">
  2. import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
  3. import { App, Button, Flex, theme, Typography } from 'ant-design-vue';
  4. import { Sender } from 'ant-design-x-vue';
  5. import { computed, ref } from 'vue';
  6. defineOptions({ name: 'AXSenderHeader' });
  7. const { token } = theme.useToken();
  8. const open = ref(false);
  9. const Demo = () => {
  10. const { message } = App.useApp();
  11. const headerNode = computed(() => (
  12. <Sender.Header title="Upload Sample" open={open.value} onOpenChange={v => open.value = v}>
  13. <Flex vertical align="center" gap="small" style={{ marginBlock: token.value.paddingLG }}>
  14. <CloudUploadOutlined style={{ fontSize: '4em' }} />
  15. <Typography.Title
  16. level={5}
  17. // @ts-expect-error
  18. style={{ margin: 0 }}
  19. >
  20. Drag file here(just demo)
  21. </Typography.Title>
  22. <Typography.Text type="secondary" >
  23. Support pdf, doc, xlsx, ppt, txt, image file types
  24. </Typography.Text >
  25. < Button
  26. onClick={() => {
  27. message.info('Mock select file');
  28. }}
  29. >
  30. Select File
  31. </Button>
  32. </Flex>
  33. </Sender.Header>
  34. ));
  35. return (
  36. <Flex style={{ height: '350px' }} align="end" >
  37. <Sender
  38. header={headerNode.value}
  39. prefix={
  40. <Button
  41. type="text"
  42. icon={< LinkOutlined />}
  43. onClick={() => {
  44. open.value = !open.value
  45. }}
  46. />
  47. }
  48. placeholder="← Click to open"
  49. onSubmit={() => {
  50. message.success('Send message successfully!');
  51. }}
  52. />
  53. </Flex>
  54. );
  55. };
  56. defineRender(() => {
  57. return (
  58. <App>
  59. <Demo />
  60. </App>
  61. )
  62. });
  63. </script>