uniapp用uParse实现html字符串数据富文本解析

最新推荐文章于 2024-09-23 16:38:51 发布

Mindy_BpStudio

最新推荐文章于 2024-09-23 16:38:51 发布

阅读量1.7k

点赞数

分类专栏： Web前端文章标签： uni-app html 前端

原文链接：https://www.jianshu.com/p/3dbdbd9f16c7

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了如何通过HBuilderX从DCLOUD插件市场下载并集成uParse插件，用于处理HTML字符串类型的富文本数据。在页面中注册组件，设置属性，并添加预览和导航事件。同时，文章还展示了如何引入及修改uParse的样式来定制页面效果。

摘要由CSDN通过智能技术生成

首先，到DCLOUD插件市场将uParse这个插件通过HBuilder X下载到你的项目中（插件链接：https://ext.dcloud.net.cn/plugin?id=183）。

这个uParse插件自带的一些属性功能如下：

属性.png

我的页面数据格式打印出来是这样的

html字符串类型数据.png

然后在需要用到富文本解析的页面，将uParse这个组件注册好。

<template>
    <view>
        <u-parse :content="datas.otherDataJson" @preview="preview" @navigate="navigate" noData="正在加载中..." />
    </view>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'
    export default {
        components: {
            uParse  //注册组件
        },
        data() {
            return {
                datas:''
            }
        },
        onLoad(option) {
            this.datas = '';
            if (option.obj) {
                let str = decodeURIComponent(option.obj)
                this.datas = JSON.parse(str);
                console.log(this.datas)
            }
        },
        methods: {
            preview(src, e) {  //事件：点击富文本里的图片
                  // do something
            },
            navigate(href, e) {  //事件：点击富文本里的链接
                // do something
            }
        }
    }
</script>

接下来在页面中引入uParse自带的样式文件,如果要修改样式的话要用/deep/进行强制修改，和修改其他插件样式的方法大同小异，这里不再做赘述。

<style scoped>
    @import url("/components/u-parse/u-parse.css");
    /deep/ .wxParse{
        margin: 10px auto;
        width: 90vw;
        padding: 20px 10px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid #E0E0E0;
        box-shadow:2px 2px 10px #7d7d7d;
    }
    /deep/ .first{
        text-align: center;
        padding-bottom: 5px;
        border-bottom: 1px solid #E0E0E0;
    }
</style>

经过插件渲染，我对页面样式做了些许修改后，页面上呈现出来的效果是这样的