方法

组件通过 ref 暴露的方法，用于控制打字动画。

DsMarkdown 方法

start()

开始打字动画，手动触发动画开始。

const ref = useRef(null);
 
<button onClick={() => ref.current?.start()}>开始</button>
<DsMarkdown ref={ref} autoStartTyping={false}>
  内容...
</DsMarkdown>

stop()

暂停打字动画，可在打字过程中调用。

<button onClick={() => ref.current?.stop()}>暂停</button>

resume()

恢复打字动画，与 stop() 配合使用。

<button onClick={() => ref.current?.resume()}>继续</button>

restart()

重新开始打字动画，从头开始播放当前内容。

<button onClick={() => ref.current?.restart()}>重启</button>

MarkdownCMD 方法

push(content, answerType?)

添加内容并开始打字，支持流式数据。

const ref = useRef(null);
 
// 添加内容
ref.current?.push('# 新标题\n\n这是新内容');
 
// 指定类型
ref.current?.push('思考内容...', 'thinking');
ref.current?.push('回答内容...', 'answer');

clear()

清空所有内容和状态，重置组件。

ref.current?.clear();

triggerWholeEnd()

手动触发完成回调。

ref.current?.triggerWholeEnd();

start()

开始打字动画，手动触发动画开始。

ref.current?.start();

stop()

暂停打字动画。

ref.current?.stop();

resume()

恢复打字动画。

ref.current?.resume();

restart()

重新开始打字动画。

ref.current?.restart();

完整示例

import { useRef } from 'react';
import { MarkdownCMD } from 'ds-markdown';
 
function App() {
  const ref = useRef(null);
 
  const handleStream = (chunk: string) => {
    ref.current?.push(chunk);
  };
 
  return (
    <div>
      <div>
        <button onClick={() => ref.current?.start()}>开始</button>
        <button onClick={() => ref.current?.stop()}>暂停</button>
        <button onClick={() => ref.current?.resume()}>继续</button>
        <button onClick={() => ref.current?.restart()}>重启</button>
        <button onClick={() => ref.current?.clear()}>清空</button>
      </div>
      
      <MarkdownCMD 
        ref={ref}
        interval={20}
        showCursor
        cursor="line"
      />
    </div>
  );
}

Props 属性类型定义