2021-11-02

uniapp使用nvue页面文本换行

编码器+技术：HBuilderX + vue/NVue/uniapp/vuex

官网写法用rich-text

html代码

<rich-text class="rich-texts" :nodes="nodes"></rich-text>

js代码

export default{
	data(){
		return{
			nodes:[		// nvue页面css换行
					{
						name: 'span',
						children: [{
								type: 'text',
								attrs: { class: 'zhi_index09', },
								text: 'Tao少',
							},{
								name: 'span',
								children: [
									{
										attrs: { class: 'zhi_index10',},
										type: 'text',
										text: '回复',
									},
								],
							},{
								name: 'span',
								attrs: { class: 'zhi_index09',},
								children: [
									{
										type: 'text',
										text: 'Tao少'+ '：',
									},
								],
							},{
								name: 'span',
								attrs: { class: 'zhi_index10',},
								children: [
									{
										type: 'text',
										text: '这里是用户1的回复内',
									},
								],
							}],
					},
				]
		}
	}
}

css代码

<style scopde>
.zhi_index09 {line-height: 50upx;color: #00AAFF;font-size: 30rpx;font-weight: bold;line-height:35rpx; }
	.zhi_index10 {line-height: 50upx;font-size: 30rpx;color:#2a2a2a;line-height:35rpx;}
</style>

效果图

这样基本就完成了