sender.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <script setup lang="tsx">
  2. import SemanticPreview from '../.vitepress/vitepress/components/semantic/preview.vue'
  3. import { Sender } from 'ant-design-x-vue'
  4. import { Flex, Button } from 'ant-design-vue';
  5. import { SmileOutlined } from '@ant-design/icons-vue'
  6. defineRender(() => {
  7. return (
  8. <Flex vertical>
  9. <SemanticPreview semantics={[
  10. { name: 'prefix', desc: '前缀' },
  11. { name: 'input', desc: '输入框' },
  12. { name: 'actions', desc: '操作列表' },
  13. ]}
  14. >
  15. {({ classNames }) => {
  16. return (
  17. <Sender classNames={classNames} prefix={<Button type="text" icon={<SmileOutlined />} />} />
  18. )
  19. }
  20. }
  21. </SemanticPreview>
  22. <SemanticPreview semantics={[
  23. { name: 'header', desc: '头部' },
  24. { name: 'content', desc: '内容' },
  25. ]}
  26. >
  27. {({ classNames }) => {
  28. return (
  29. <Sender
  30. header={
  31. <Sender.Header open title="Header" classNames={classNames}>
  32. Content
  33. </Sender.Header>
  34. }
  35. />
  36. )
  37. }
  38. }
  39. </SemanticPreview>
  40. </Flex>
  41. )
  42. })
  43. </script>