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)
}