当前位置:   article > 正文

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

vue3 使用 markdown 格式化代码过后, 再以打印机的效果方式输出到页面

  

1.安装marked插件 npm install marked

2.引入marked

import { marked } from 'marked'

3.template中使用

  1. <template>
  2. <view>
  3. <rich-text :nodes="marked(markdownText)"></rich-text>
  4. </view>
  5. </template>

  1. const markdownText = ref('') //需要解析的内容
  2. const index = ref(0) //索引
  3. //如果当前索引 index小于字符数组的长度,取出该索引对应的字符。
  4. //如果这个字符存在,将该字符添加到 markdownText中
  5. //如果遍历完所有字符,则清除定时器
  6. let interval: any = null
  7. //添加打字机效果
  8. const parseMarkdown = (text: string) => {
  9. //清除之前的定时器,避免重复
  10. clearInterval(interval)
  11. if (index.value === 0) {
  12. markdownText.value = '' // 清空内容
  13. }
  14. const arr = text.split('')
  15. interval = setInterval(() => {
  16. if (index.value < arr.length) {
  17. const str = arr[index.value]
  18. if (str) {
  19. markdownText.value += str
  20. index.value++
  21. }
  22. } else {
  23. clearInterval(interval)
  24. }
  25. }, 50)
  26. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/971200
推荐阅读
相关标签
  

闽ICP备14008679号