uni-app富文本渲染方案rich-text、uparse、v-html简单解析

2023-11-13

uniapp语法:rich-text

1、rich-text是uni-app的内置组件,提供了高性能的富文本渲染模式。
2、API参考https://uniapp.dcloud.io/component/rich-text
3、rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事件,无法对富文本中的图片、超链接单独设点击事件。(这个缺陷有点严重,因为这个缺陷,一般不建议使用,除非你的富文本内容是单纯提供给用户浏览的)
4、h5和nvue支持图片、超链接单独点击。
5、app-nvue只能使用rich-text。

vue语法:v-html

1、在uni-app中,h5端和app-vue的v3编译器下可以使用v-html
2、小程序不支持此语法

万能的业内大佬:uparse

1、全端支持,除了nvue

总结

1、rich-text有很大弊端(不支持富文本内点击事件),若富文本里有可点击事件,则不推荐使用
2、v-html在小程序中不支持。若项目不包含小程序,则推荐使用v-html。(记得使用v3编译器,2.7.5版本+的HBuildX已默认使用v3编译,无需自定义设置)
3、uparse全端支持,但不支持nvue。若项目包含app,小程序,则推荐使用uparse。然后在nvue页面另行使用rich-text即可。

uparse使用方法

<template>
  <view>
    <u-parse :content="article" @preview="preview" @navigate="navigate" noData="正在加载中..." />  //使用组件
  </view>
</template>


import uParse from '@/components/gaoyia-parse/parse.vue'  //引入组件

export default {
  components: {
    uParse  //注册组件
  },
  data () {
    return {
        article: '<p>html代码,具体参见https://github.com/gaoyia/parse/tree/1.0.7/parse-demo中的demo</p>'
    }
  },
  methods: {
    preview(src, e) {  //事件:点击富文本里的图片
      // do something
    },
    navigate(href, e) {  //事件:点击富文本里的链接
      // do something
    }
  }
}


//在APP.vue中引入,否则样式不能生效
<style>
@import url("/components/gaoyia-parse/parse.css");
</style>





若不想单页面引入组件,也可全局注册组件:在main.js中
import uParse from '@/components/gaoyia-parse/parse.vue'
Vue.component('u-parse',uParse)
在其它页面即可<u-parse :content="info" @preview="preview" @navigate="navigate" noData="正在加载中..." />调用了

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app富文本渲染方案rich-text、uparse、v-html简单解析 的相关文章

随机推荐

  • 【SSL_1232】雷达覆盖

    思路 以一个点作为平角 计算几何统计 c o d e code code include
  • 在虚拟机中win10启用远程桌面的方法

    1 打开虚拟机 选择此电脑 右键属性 2 选择远程桌面 开启服务 3 打开cmd 输入ipconfig 查看IP 4 在宿主机上按住win r快捷键 输入matsc 打开远程桌面连接 输入虚拟机的ip 5 输入虚拟机的用户名和密码 6 连接
  • 虚拟机网络桥接,详细操作步骤,本地连接虚拟机

    虚拟机网络桥接 文章目录 虚拟机网络桥接 一 首先查看主机连接网络的网关 二 打开虚拟机的worksation服务 三 修改主机的VMnet8的IPV4属性 四 修改虚拟机的workstation的虚拟网络 五 修改VMnet8的IP 网关
  • ATK&ck靶场系列二

    信息收集 nmap sP 192 168 111 0 24 nmap sS T4 A v p 192 168 111 80 nmap sS T4 A v p 192 168 111 80 Starting Nmap 7 93 https n
  • 录音时分离左右声道的数据

    平台录音默认为8通道数据 保存到文件中取左右声道数据 当mic 1时 取左声道数据 当mic 2时 取右声道数据 private byte splitStereoPcm byte data int monoLength data lengt
  • Spring Bean基础

    Spring Bean基础 1 1 定义Spring Bean 1 1 1 什么是BeanDefinition 1 2 通过BeanDefinition构建Bean 1 3 注册Bean BeanDefinition 注册 1 4 实例化S
  • SQL中按分隔符拆分字符串

    一 Oracle数据库按分隔符拆分字符串 1 应用函数 REGEXP SUBSTR 2 语法 REGEXP SUBSTR String pattern position occurrence modifier 3 参数解释 srcstr 需
  • 【计算机操作系统】第三章 处理机调度与死锁

    在多道程序环境下 主存中有着多个进程 其数目往往多于处理机数目 这就要求系统能按某种算法 动态地把处理机分配给就绪队列中的一个进程 使之执行 分配处理机的任务是由处理机调度程序完成的 由于处理机是最重要的计算机资源 提高处理机的利 用率及改
  • spring boot引入mybatis plus,使用通用mapper、service

    一 mybatis plus官方文档 mybatis plus官方文档 二 spring boot 引入mybatis plus 在指定项目的pom xml文件下添加以下代码
  • JMeter 5.3/MeterSphere v1.1.2接口测试工具安装

    最近工作需要对web服务接口进行压力测试 由于完全没有测试相关经验 就只能走一步看一步了 由于主要是测试接口的并发性能 因而需要一个能并发产生请求的工具 最开始想到用postman 毕竟对这玩意儿比较了解 但是结果是 这个东西虽然能够在短时
  • 从零开始学Python(4) -----用Jupyter绘制各种图形

    在上一次学习中 我们介绍了如何加载CSV文件 并在Jupyter笔记本上绘制条形图 这次 我们将介绍如何从CSV文件中提取任意数据并绘制各种图形 让我们看看股票是涨还是跌 之前 我们已经体验了用Pandas库来读取读取CSV数据并绘制图表
  • 软件工程 第五章 详细设计

    1 详细设计的内容是什么 内容 1 确定每个模块的算法 2 确定每一个模块的数据组织 3 为每个模块设计一组测试用例 4 编写详细设计说明书 原则 1 模块的逻辑描述正确可靠 清晰易读 2 采用结构化程序设计方法 改善控制结构 降低程序复杂
  • vue router 动态路由清除

    重置matcher可达到路由还原效果 在用户退出时调用 resetRouter router 即可还原路由 import Vue from vue import Router from vue router import constantR
  • 为什么出现下一代云计算-分布式云 ?

    2020年10月19日 Garnter发布了2021年战略技术趋势 至此 分布式云连续两年 2020 2021 被列入Gartner战略技术趋势榜单了 分布式云 Distributed Cloud Gartner预测 到2025年 超过50
  • [cmake命令笔记]CMake添加C++预定义宏add_definitions

    比如要在代码中有进行宏判断的地方 ifdefine IMAGE PNG xxx endif ifdefine IMAGE JPG xxx endif ifdefine IMAGE TIFF xxx endif 你需要通过宏执行响应代码 那么
  • pytorch:线性回归(Regression)

    使用pytorch python实现回归 程序 import torch import torch nn functional as F from matplotlib import pyplot as plt 创建数据 x torch u
  • Jtest简介

    Jtest是一个集成的 易于使用和Java单元测试工具 它能够自动测试任何Java类 JSP或部件 而不需要你编写一个测试用例 测试驱动程序和测试桩 只需一键 Jtest自动测试代码的构造 白盒测试 代码功能 黑盒测试 并维护代码的完整性
  • caffe convert_image 初略解析

    需要的基础知识 OpenCV 建议去看官网的图文教程 LevelDB http dblab cs toronto edu courses 443 2014 tutorials leveldb html 这个是我学习的教程 今天在看caffe
  • 时序预测

    时序预测 MATLAB实现贝叶斯优化LSTM时间序列预测 BO LSTM 预测效果 基本介绍 相对于模型的参数而言 Parameter 我们知道机器学习其实就是机器通过某种算法学习数据的计算过程 通过学习得到的模型本质上是一些列数字 如树模
  • uni-app富文本渲染方案rich-text、uparse、v-html简单解析

    uniapp语法 rich text 1 rich text是uni app的内置组件 提供了高性能的富文本渲染模式 2 API参考https uniapp dcloud io component rich text 3 rich text