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

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。