AI问答系统前端搭建：基于ant-design-x-vue如何实现渲染echart图表的同时保留打字机特效

当我们要实现一个PC端AI问答系统时，使用ant-design-x-vue组件库可以快速帮我们搭建起页面和实现一些基本功能：Bubble 对话气泡 | Ant Design X Vue

当我们需要在里面渲染一个自定义vue组件时，提供了一个回调函数钩子

但此时组件提供的打字机效果是没有的了，原因就是打字机效果实现的原理无非就是不断重复得渲染innerhtml这个字符串，而我们的自定义vue组件很难变成原生的html文本

messageRender: (content) => {
              console.log(content)
              
              return (
                <div
                  class="md-render"
                  style={{ textAlign: 'left' }}
                  v-html={md.render(content)}
                  onClick={clickUrl.bind(null, id)}
                ></div>
              )}

下面来讲讲渲染图表的同时保留打字机效果：

1.使用ssr等方式提前将图表渲染出来，用图片或者svg的形式直接返回原生dom字符串

2.延迟渲染：

将原本要渲染图表的地方先用一个空div占着空间，等到完整的innerhtml渲染完后，再根据标记的空div渲染图表或者自定义组件（web component）

onTypingComplete: () => {
              setTimeout(() => {
                finishInputRenderChart()
              }, 0)
            }

function finishInputRenderChart() {
        echartRenderArr.value
          .filter((val) => val.type == 'echart')
          .forEach((val) => {
            const foundElement = document.getElementById(`${val.key}`)
            if (foundElement) {
              if (!val.echartInstance) {
                val.echartInstance = echarts.init(foundElement)
              }
              console.log('val.content', val.content, val.echartInstance)
              val.echartInstance.setOption(val.content)
            }
          })
      }

如果不使用ant-design-x自己实现一个的话，可以考虑分段渲染，就不需要延迟到结束才渲染