uniapp 输出html_uni-app渲染html字符串的方案,你会怎么选择?

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使用方法导入成功后可以看到components下多了此组件

基本用法

//使用组件

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

export default {

components: {

uParse //注册组件

},

data () {

return {

article: '

html代码,具体参见https://github.com/gaoyia/parse/tree/1.0.7/parse-demo中的demo

'

}

},

methods: {

preview(src, e) { //事件:点击富文本里的图片

// do something

},

navigate(href, e) { //事件:点击富文本里的链接

// do something

}

}

}

//在APP.vue中引入,否则样式不能生效

@import url("/components/gaoyia-parse/parse.css");

若不想单页面引入组件,也可全局注册组件:在main.js中(当然也可以注册为具体页面独有的组件)

import uParse from '@/components/gaoyia-parse/parse.vue'

Vue.component('u-parse',uParse)

在其它页面即可调用了

======

其实我也是最喜欢用uparse 。 :)

各位uniapp粉会怎么选择呢? 更页内同行聊一聊不是挺好的吗?

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值