当前位置:网站首页>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>
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
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 | 链接地址,原始事件 | 点击链接时触发 |
边栏推荐
- Topolvm: kubernetes local persistence scheme based on LVM, capacity aware, dynamically create PV, and easily use local disk
- "All majors are persuading them to quit." is it actually the most friendly to college students?
- Cs5213 HDMI to VGA (with audio) single turn scheme, cs5213 HDMI to VGA (with audio) IC
- Paddlepaddle 21 is implemented based on dropout with 4 lines of code droplock
- 学习太极创客 — MQTT(七)MQTT 主题进阶
- 学习太极创客 — MQTT(九)ESP8266 同时订阅和发布 MQTT 消息
- Learning Tai Chi Maker - mqtt (VII) advanced mqtt theme
- Hot discussion: what are you doing for a meaningless job with a monthly salary of 18000?
- Memcached basics 11
- 455. distribute biscuits [distribution questions]
猜你喜欢
STM32入门介绍
Svg drag dress Kitty Cat
【数组】剑指 Offer II 012. 左右两边子数组的和相等 | 剑指 Offer II 013. 二维子矩阵的和
SQLite reader plug-in tests SQLite syntax
Flink learning 1: Introduction
Yuantou firm offer weekly record 20220627
Don't be brainwashed. This is the truth about the wages of 90% of Chinese people
H5 liquid animation JS special effect code
达梦数据库安装
What if asreml-r does not converge in operation?
随机推荐
Flink学习5:工作原理
流沙画模拟器源码
Oracle/PLSQL: Cast Function
Yiwen teaches you Kali information collection
Geometric distribution (a discrete distribution)
Cvpr2022 | pointdistiller: structured knowledge distillation for efficient and compact 3D detection
455. distribute biscuits [distribution questions]
bluecms代码审计入门
达梦数据库的卸载
Docker deploy redis cluster
Flink learning 4:flink technology stack
pytorch_grad_cam——pytorch下的模型特征(Class Activation Mapping, CAM)可视化库
Shell script series (1) getting started
Microsoft365开发人员申请
Calculation of average wind direction and speed (unit vector method)
[micro service sentinel] degradation rules slow call proportion abnormal proportion abnormal constant
dat. gui. JS star circle track animation JS special effect
lodash get js代码实现
测试nohup和&的各自作用
TechSmith Camtasia latest 2022 detailed function explanation Download