zoukankan      html  css  js  c++  java
  • nvue 多个text超出自动换行

    使用 组件 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);
        }

     

    可以参考:https://www.cnblogs.com/robot666/p/14987404.html

  • 相关阅读:
    python的三个函数map、filter、reduce详解
    python 对文件进行切分行
    sed 命令匹配行操作
    停止学习框架
    JS中双等号“==”使用情况
    JavaScript中数组迭代方法
    JavaScript中replace()方法的第二个参数解析
    Vue生命周期
    JS中浮点数精度误差解决
    大量DOM操作的解决方案
  • 原文地址:https://www.cnblogs.com/chenshaoxiong/p/15505213.html
Copyright © 2011-2022 走看看