rich-text nvue
时间: 2023-12-11 20:02:18 浏览: 388
RichText
在uni-app中,nvue页面展示富文本内容可以使用`<rich-text>`组件。但需要注意的是,H5端可以正常显示,但真机调试时可能出现不显示的情况。如果将文件换成vue文件,则可以正常展示。用法如下:
```vue
<template>
<view class="u-content">
<rich-text :nodes="content" style="font-size: 14px;"></rich-text>
</view>
</template>
<script>
import htmlParser from '../../common/html-parser'
export default {
data() {
return {
content: []
}
},
onLoad() {
this.initText();
},
methods: {
initText() {
// 请求回来后的参数,此处模拟一下
const arr = `
<div style="text-align:center;">
<p>露从今夜白,月是故乡明</p>
<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" style="width:550upx;height: 220upx" />
</div>
`;
this.content = htmlParser(arr);
}
}
}
</script>
```
在nvue页面中,使用`<rich-text>`组件展示富文本时需要将内容传递给`nodes`属性,并使用`htmlParser`进行解析。因为nvue不支持直接渲染富文本内容。所以需要先将富文本内容转换为节点数组,然后通过`<rich-text>`组件进行渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uni-app富文本渲染方案rich-text、uparse、v-html简单解析](https://blog.csdn.net/u012767761/article/details/127282124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [在nvue中富文本rich-text不显示和图片不显示的解决](https://blog.csdn.net/weixin_45979310/article/details/122997535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文