markdown.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <script setup lang="tsx">
  2. import { UserOutlined } from '@ant-design/icons-vue';
  3. import { Bubble } from 'ant-design-x-vue';
  4. import type { BubbleProps } from 'ant-design-x-vue';
  5. import { Typography } from 'ant-design-vue';
  6. import markdownit from 'markdown-it';
  7. import { onWatcherCleanup, ref, watchEffect } from 'vue';
  8. defineOptions({ name: 'BubbleMarkdown' });
  9. const md = markdownit({ html: true, breaks: true });
  10. const text = `
  11. > Render as markdown content to show rich text!
  12. Link: [Ant Design X](https://x.ant.design)
  13. `.trim();
  14. const renderMarkdown: BubbleProps['messageRender'] = (content) => (
  15. <Typography>
  16. <div v-html={md.render(content)} />
  17. </Typography>
  18. );
  19. const renderKey = ref(0);
  20. watchEffect(() => {
  21. const id = setTimeout(
  22. () => {
  23. renderKey.value = renderKey.value + 1;
  24. },
  25. text.length * 100 + 2000,
  26. );
  27. onWatcherCleanup(() => {
  28. clearTimeout(id);
  29. });
  30. });
  31. defineRender(() => {
  32. return (
  33. <div style={{ height: 100 }} key={renderKey.value}>
  34. <Bubble
  35. typing
  36. content={text}
  37. messageRender={renderMarkdown}
  38. avatar={{ icon: <UserOutlined /> }}
  39. />
  40. </div>
  41. )
  42. });
  43. </script>