需求背景：
在做一個直播聊天室（主播頁用了nvue）聊天室顯示訪客進來的昵稱和消息內容字體得分開顯示。例如：
難題所在：
開始就以為是寫的樣式得問題。為了一行，flex-direction: row; 該屬性試了但是確實可以同行，但是不會換行。眾所周知：nvue下得文字必須在text標簽下才能顯示正常，不然你的樣式就不起效果了（會是默認得樣式和字體，一半很丑）。但是如果你里面只用一個text標簽顯示肯定就是沒用問題的......就是一半UI不給這么干！
解決問題
以下面的為示例：采用rich-text代替紅色加粗部分
<list class="listview" :scrollable="true" :scroll-y="true" :show-scrollbar="false"
id="msgScroll" ref="msgScroll">
<cell v-for="(item, index) in messageList" :key="item.msgId" >
<div class="cell">
<!-- <text class="msg-name">{{item.name}}</text>
<text class="msg-item">{{item.message}}</text> -->
<rich-text :nodes="richNodes(item)"></rich-text>
</div>
</cell>
<cell class="cell">
<text class="msg-itemGao">公告:平台公告:歡迎來到直播間!蘇躍小Q直播倡導綠色直播，如果直播間出現違法違規行為，請及時舉報。為了您的購物安全，請在右下角"小紅袋"官方渠道選購商品</text>
</cell>
</list>
邏輯部分：
richNodes(item){
return [{
children: [
{
type: 'text',
attrs: {
class:'msg-name'
},
text: item.name+':'
},
{
type: 'text',
attrs: {
class:'msg-item'
},
text: item.message
}
]
}]
}
css部分：
.listview {
width: 500rpx;
height: 500rpx;
border-radius: 20rpx;
transform: rotate(180deg);
flex:1;
padding:0 10rpx;
}
.cell {
padding: 6rpx;
margin: 6rpx 0;
border-radius: 10rpx;
background-color: rgba(0, 0, 0, 0.3);
transform: rotate(180deg);
}
.msg-name {
color: #fed93a;
font-size: 32rpx;
}
.msg-item {
color: #f3f3f3;
font-size: 32rpx;
}
感悟：
在vue能用的css在nvue里未必行得通啊。天無絕人之路。加油。奧里給！