uniapp vue3 小程序中使用marked解析markdown 并添加打字机效果_vue3 使用 markdown 格式化代码过后, 再以打印机的效果方式输出到页面

1.安装marked插件 npm install marked

2.引入marked

import { marked } from 'marked'

3.template中使用

<template>
  <view>
    <rich-text :nodes="marked(markdownText)"></rich-text>
  </view>
</template>

const markdownText = ref('') //需要解析的内容
const index = ref(0) //索引
 
//如果当前索引 index小于字符数组的长度，取出该索引对应的字符。
//如果这个字符存在，将该字符添加到 markdownText中
//如果遍历完所有字符，则清除定时器
 
let interval: any = null  
 
//添加打字机效果
const parseMarkdown = (text: string) => {
 
  //清除之前的定时器，避免重复
  clearInterval(interval)
  
  if (index.value === 0) {
     markdownText.value = '' // 清空内容
  }
 
  const arr = text.split('')
 
    interval = setInterval(() => {
      if (index.value < arr.length) {
        const str = arr[index.value]
        if (str) {
          markdownText.value += str
          index.value++
        }
      } else {
        clearInterval(interval)
      }
    }, 50)
}