当前位置:网站首页>Uni-app 之uParse 富文本解析 完美解析富文本!

Uni-app 之uParse 富文本解析 完美解析富文本!

2022-06-27 02:48:00 Z_Xshan

下载uni-app插件

uparse下载地址:uParse 富文本解析 - DCloud 插件市场

下载完之后会有 components文件 

基本使用方法

<template>
  <div>
    <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse>
  </div>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("@/components/u-parse/u-parse.css");
</style>

属性

名称类型默认值描述
loadingBooleanfalse数据加载状态
classNameString自定义 class 名称
contentString渲染内容
noDataString数据不能为空空数据时的渲染展示
startHandlerFunction见源码自定义 parser 函数
endHandlerFunctionnull自定义 parser 函数
charsHandlerFunctionnull自定义 parser 函数
imagePropObject见下文图片相关参数

自定义 parser 函数具体介绍

  • 传入的参数为当前节点 node 对象及解析结果 results 对象,例如 startHandler(node, results)
  • 无需返回值,通过对传入的参数直接操作来完成需要的改动
  • 自定义函数会在原解析函数处理之后执行

事件

名称参数描述
preview图片地址,原始事件预览图片时触发
navigate链接地址,原始事件点击链接时触发

 

原网站

版权声明
本文为[Z_Xshan]所创,转载请带上原文链接,感谢
https://blog.csdn.net/Z_Gleng/article/details/125420345