headerFixed.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script setup lang="tsx">
  2. import { EnterOutlined } from '@ant-design/icons-vue';
  3. import { App, Flex, Space, Switch, Typography } from 'ant-design-vue';
  4. import { Sender } from 'ant-design-x-vue';
  5. import { computed, ref } from 'vue';
  6. defineOptions({ name: 'AXSenderHeaderFixed' });
  7. const hasRef = ref(true);
  8. const Demo = () => {
  9. const { message } = App.useApp();
  10. const headerNode = computed(() => (
  11. <Sender.Header
  12. open={hasRef.value}
  13. title={
  14. <Space>
  15. <EnterOutlined />
  16. <Typography.Text type="secondary">"Tell more about Ant Design X"</Typography.Text>
  17. </Space>
  18. }
  19. onOpenChange={v => hasRef.value = v}
  20. />
  21. ));
  22. return (
  23. <Flex vertical gap="middle" align="flex-start">
  24. <Switch
  25. checked={hasRef.value}
  26. onChange={() => hasRef.value = !hasRef.value}
  27. checkedChildren="With Reference"
  28. unCheckedChildren="With Reference"
  29. />
  30. <Sender
  31. header={headerNode.value}
  32. onSubmit={() => {
  33. message.success('Send message successfully!');
  34. }}
  35. />
  36. </Flex>
  37. );
  38. };
  39. defineRender(() => {
  40. return (
  41. <App>
  42. <Demo />
  43. </App>
  44. )
  45. });
  46. </script>