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

下载uni-app插件

先看效果

下载完之后会有 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>

属性

名称	类型	默认值	描述
loading	Boolean	false	数据加载状态
className	String	—	自定义 class 名称
content	String	—	渲染内容
noData	String	数据不能为空	空数据时的渲染展示
startHandler	Function	见源码	自定义 parser 函数
endHandler	Function	null	自定义 parser 函数
charsHandler	Function	null	自定义 parser 函数
imageProp	Object	见下文	图片相关参数

自定义 parser 函数具体介绍

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

事件

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

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

下载uni-app插件

基本使用方法

属性

自定义 parser 函数具体介绍

事件

猜你喜欢

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