123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <script setup lang="tsx">
- import { UserOutlined } from '@ant-design/icons-vue';
- import { Bubble } from 'ant-design-x-vue';
- import type { BubbleProps } from 'ant-design-x-vue';
- import { Typography } from 'ant-design-vue';
- import markdownit from 'markdown-it';
- import { onWatcherCleanup, ref, watchEffect } from 'vue';
- defineOptions({ name: 'BubbleMarkdown' });
- const md = markdownit({ html: true, breaks: true });
- const text = `
- > Render as markdown content to show rich text!
- Link: [Ant Design X](https://x.ant.design)
- `.trim();
- const renderMarkdown: BubbleProps['messageRender'] = (content) => (
- <Typography>
- <div v-html={md.render(content)} />
- </Typography>
- );
- const renderKey = ref(0);
- watchEffect(() => {
- const id = setTimeout(
- () => {
- renderKey.value = renderKey.value + 1;
- },
- text.length * 100 + 2000,
- );
- onWatcherCleanup(() => {
- clearTimeout(id);
- });
- });
- defineRender(() => {
- return (
- <div style={{ height: 100 }} key={renderKey.value}>
- <Bubble
- typing
- content={text}
- messageRender={renderMarkdown}
- avatar={{ icon: <UserOutlined /> }}
- />
- </div>
- )
- });
- </script>
|