1***@qq.com
1***@qq.com
  • 发布:2020-04-27 10:36
  • 更新:2021-07-01 15:11
  • 阅读:2036

请问NVUE怎么实现如下图评论回复的换行效果?

分类:nvue

每次回复内容超出一行的宽度时就整个标签换行了,我想要达到一行占满后剩下的从第二行开始显示,而且要围绕着用户名的方式换行,请问有什么方法吗?

2020-04-27 10:36 负责人:无 分享
已邀请:
x***@qq.com

x***@qq.com - 疑问?的小纳?

写css样式的就行了

  • 1***@qq.com (作者)

    nvue好多限制,写了好多样式都实现不了

    2020-04-27 11:04

  • 请叫我九爷

    回复 1***@qq.com: 兄弟解决了嘛,解决的话 麻烦你发分例子

    2021-01-09 11:51

2***@qq.com

2***@qq.com - Ciao! 你好 HELLO THERE 你好,在吗?

实现了吗

  • 1***@qq.com (作者)

    目前只能用rich-text,但还是有功能限制

    2020-05-21 10:17

  • 1***@qq.com

    回复 1***@qq.com: 老哥给个代码范例看看

    2020-10-19 10:47

  • 请叫我九爷

    回复 1***@qq.com: 无法使用背景颜色 非常难搞

    2021-01-09 10:24

  • 2***@qq.com

    回复 1***@qq.com: 我用richtext渲染每次有新数据时页面已有的用richtext渲染的样式都会闪烁一下,请问又遇到这样的问题吗?

    2021-12-16 11:54

请叫我九爷

请叫我九爷 - ????

第一张是想要的效果图,第二章是我自己做的,用了好多方法多搞不定 nvue 非常难搞的

  • 1***@qq.com (作者)

    下面是例子

    2021-01-15 16:22

1***@qq.com

1***@qq.com (作者)

目前解决方法使用rich-text,大家仔细看下官方文档:https://uniapp.dcloud.io/component/rich-text?id=rich-text。
注意nvue只能使用数组方式,以下是实现代码:
单一回复:

var nodes = [{name: 'span',children: [{type: 'text',attrs: {class: 'div-class'},text: '这里是用户1的名字' + ':'},{name: 'span',attrs: {class: 'div-class2',},children: [{type: 'text',text: '这里是用户1的回复内容'}]}]}];

用户1回复用户2:

var nodes = [{name: 'span',children: [{type: 'text',attrs: {class: 'div-class'},text: '这里是用户1的名字'},{type: 'text',attrs: {class: 'div-class2',},text: ' ' + ' 回复 ' + ' '},{type: 'text',attrs: {class: 'div-class'},text: '这里是用户2的名字' + ':'},{name: 'span',attrs: {class: 'div-class3',},children: [{type: 'text',text: '这里是用户1的回复内容'}]}]}];

name: 'span'表示使用span标签,children表示span标签下的内容,attrs: {class: 'div-class'}是样式,也可以用attrs: {style: 'color: red'},text是内容。
因为用户1回复用户2,中间的'回复'两字样式不一样,所以另起一组。
<rich-text style="" :nodes="nodes"></rich-text>

Smart900zhang

Smart900zhang - 一名前端

给容器设置width就可以换行

  • 9***@qq.com

    你连问题是什么都没明白

    2022-12-11 11:25

该问题目前已经被锁定, 无法添加新回复