富文本解析器uParse优化版，已在生产环境使用

更新记录

3.1.0（2020-04-19）

解决部分设备不渲染问题，解决表格table不能定义宽度问题

支持table自定义

全局引入：@import '@/components/feng-parse/parse.css';

修改table样式修改parse.css 里面的table相关css

3.0.0（2020-03-06）

修复加粗后丢失空格问题，支持斜体

2.0.1（2020-02-11）

修复百度小程序中IOS端打包后无法渲染内容的问题感谢反馈

平台兼容性

20200419更新

解决部分设备不渲染问题，解决表格table不能定义宽度问题

支持table自定义

全局引入：@import '@/components/feng-parse/parse.css';

修改table样式修改parse.css 里面的table相关css

20200211更新

解决百度小程序IOS端渲染内容无法显示的问题

说明

本插件非官方！！！由于官方的uParse虽然实现了富文本解析的大部分功能，

但是一些细节问题，并不能满足实际生产环境下的使用，

在正式的开发过程中我们遇到很多问题，并对其进行了修复，

最终得到这个可以在生产环境中直接使用的版本

为了让大家不要重复踩坑，发布供大家直接使用

后续会通过对项目的不断优化来更新这个版本

属性

属性查看官方文档 https://ext.dcloud.net.cn/plugin?id=183 这里大概写一下：

名称类型默认值描述

loading Boolean false 数据加载状态

className String — 自定义 class 名称

content String — 渲染内容

noData String 数据不能为空空数据时的渲染展示

startHandler Function 见源码自定义 parser 函数

endHandler Function null 自定义 parser 函数

charsHandler Function null 自定义 parser 函数

imageProp Object 见下文图片相关参数

使用方法

与官方相同，下载组件，放到components文件夹下，或直接使用HbuiderX导入插件项目引入：

import uParse from "@/components/feng-parse/parse.vue"
export default {
        components:{
            uParse
        },
        ···········

在需要的显示位置引入：

<u-parse :content="content" @navigate="navigate"></u-parse>

示例

template

<view>
    <view class="content">
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
    </view>
    <view class="parse-con">
        <u-parse :content="content" @navigate="navigate"></u-parse>
    </view>
    <!-- 如果是v3编译器直接使用v-html吧 -->
    <!-- <view class="parse-con">
        <view v-html="content"></view>
    </view> -->
</view>

script

import uParse from "@/components/feng-parse/parse.vue"
    export default {
        components:{
            uParse
        },
        data() {
            return {
                title: 'Hello Feng',
                content:'<em>abc123</em>'
            }
        },
        onLoad() {
            //获取你的content内容
        },
        methods: {
            navigate(e){
                console.log(e)
            }
        }
    }

关于v3编译器的问题

v3编辑器下报错：

TypeError: undefined is not an object (evaluating '_vm.node.node') 
ReferenceError: Can't find variable: getApp

在v3中会报错，推荐直接使用v-html 或关闭v3编译，后续会修复这个问题，如果大家有什么好的办法，可以留言告诉我。