markdown.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <script setup lang="ts">
  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, h } from 'vue';
  8. defineOptions({ name: 'AXBubbleMarkdownSetup' });
  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. h(Typography, null, {
  16. default: () => h('div', { innerHTML: md.render(content) }),
  17. });
  18. const renderKey = ref(0);
  19. watchEffect(() => {
  20. const id = setTimeout(() => {
  21. renderKey.value = renderKey.value + 1;
  22. }, text.length * 100 + 2000);
  23. onWatcherCleanup(() => {
  24. clearTimeout(id);
  25. });
  26. });
  27. </script>
  28. <template>
  29. <div :style="{ height: 100 }" :key="renderKey">
  30. <Bubble
  31. :typing="true"
  32. :content="text"
  33. :messageRender="renderMarkdown"
  34. :avatar="{ icon: h(UserOutlined) }"
  35. />
  36. </div>
  37. </template>