uni-app富文本渲染方案rich-text、uparse、v-html简单解析
1、rich-text有很大弊端(不支持富文本内点击事件),若富文本里有可点击事件,则不推荐使用2、v-html在小程序中不支持。若项目不包含小程序,则推荐使用v-html。(记得使用v3编译器,2.7.5版本+的HBuildX已默认使用v3编译,无需自定义设置)3、uparse全端支持,但不支持nvue。若项目包含app,小程序,则推荐使用uparse。然后在nvue页面另行使用rich-tex
·
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使用方法
- 进入插件市场,导入此插件: uParse修复版-html富文本加载 - DCloud 插件市场 (也可使用其他版本)
- 导入成功后可以看到components下多了此组件
- 基本用法
<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="正在加载中..." />调用了
更多推荐
所有评论(0)