使用 组件 rich-text(nvue 专有) 富文本



<view class="bottom-msg-area lst">
<scroll-view class="msg-area-scroll" scroll-y="true" scroll-with-animation
:scroll-into-view="scrollIntoView">
<view class="">
<text class="pingtai-tips">{{broadcastData.admin_info}} </text>
<text class="zhubo-tips">{{broadcastData.mer_info}}</text>
</view>
<view v-for="(item,i) in historyChat" :id="'danmu'+item.reply_id" :key="i">
<view class="listview" >
<!-- <text class="lin-msg-name">{{item.user.nickname}}:</text>
<text class="lin-msg-content">{{item.comment}}</text> -->
<rich-text :nodes="richNodes(item)"></rich-text>
</view>
</view>
</scroll-view>
</view>


// js 逻辑 ( h5 )
richNodes(item) {
return [
{
name: 'div',
attrs: {
class: 'div-rich-nickname',
style: 'color: #50c76f;display: contents;'
},
children: [
{
type: 'text',
text: item.user.nickname+':'
}
]
},
{
name: 'div',
attrs: {
class: 'div-rich-comment',
style: 'color: #fff;display: contents;'
},
children: [
{
type: 'text',
text: item.comment
}
]
}
]
}


//( app )
richNodes(item) {
return [{
children: [{
type: 'text',
attrs: {
class: 'lin-msg-name'
},
text: item.user.nickname + ':'
},
{
type: 'text',
attrs: {
class: 'lin-msg-content'
},
text: item.comment
}
]
}]
}


//样式
.listview {
padding: 6rpx 10rpx;
margin: 10rpx 0;
border-radius: 10rpx;
background-color: rgba(0, 0, 0, 0.3);
}
.lin-msg {
font-size: 22rpx;
flex-direction: row;
}
.lin-msg-name {
font-size: 26rpx;
color: #50c76f;
/* 可能是组件 rich-text 的问题,有默认的白色背景颜色,这里要给透明*/
background-color: rgba(0, 0, 0, 0);
}
.lin-msg-content {
font-size: 26rpx;
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0);
}


 nvue 多个text超出自动换行_背景颜色