7***@qq.com
7***@qq.com
  • 发布:2021-04-25 14:55
  • 更新:2021-12-12 06:41
  • 阅读:773

【报Bug】ios真机 nvue页面 rich-text 文字带有白色背景去不掉

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.2.3

HBuilderX类型: 正式

HBuilderX版本号: 3.1.11

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 苹果

手机机型: iphonex

页面类型: nvue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="box">  
        <input class="input" v-model="releaseContent" @confirm="sendMsg" confirm-type="send" type="text" />  
        <rich-text class="chat-text" :nodes="textNodes"></rich-text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                releaseContent : '',  
                textNodes : [],  
            }  
        },  
        mounted() {  
        },  
        methods: {  
            sendMsg(){  
                this.textNodes = this.buildEmoji(this.releaseContent);  
            },  
            buildEmoji(text) {  
                var resArr = [];  
                resArr.push({  
                    name : 'span',  
                    attrs: {  
                        class: 'green',  
                        style: 'fontSize:24rpx;backgroundColor:red;color:green',  
                    },  
                    children: [{  
                        type : 'text',  
                        text : text  
                    }]  
                })  
                resArr.push({  
                    name : 'img',  
                    attrs : {  
                        style: 'width:50rpx;height:50rpx;',  
                        src : '../../static/emoji_0.png'  
                    }  
                });  
                return resArr;  
            }  
        }  
    }  
</script>  

<style>  
.box{  
    background: #000;  
    padding: 400rpx 0 0 0;  
}  
.input{  
    background: #999;  
}  
</style>  

操作步骤:

ios真机测试

预期结果:

1,在vue页面的input中右下角键盘不会出现“确认”,导致事件不能触发,
2,在ios下,nvue中使用rich-text可以对文字背景色修改

实际结果:

1,在vue页面的input中右下角键盘出现“确认”,导致事件不能触发,
2,在ios下,nvue中使用rich-text文字自带白色背景,并且不能被修改

bug描述:

我在做一个聊天功能,目前发现这样的问题:
1,ios中,vue在输入框聚焦弹出键盘后,键盘右下角的按键“发送”有时会变成“确认”,这时点击不会触发@confirm事件,我只好换成nvue没有这个问题。

2,在nvue中使用rich-text做聊天文字表情的转换,结果发现在ios下文字自带有白色背景,并且无法被改掉

如果暂时不能解决希望能通知一声,以便换成其他解决方案

2021-04-25 14:55 负责人:无 分享
已邀请:
perrydpp

perrydpp

同样遇到了
被折腾了半天
最后在richt-text标签上设置样式background:transparent解决

  • x***@vip.qq.com

    正解啊,我是vue3+nvue。之前好好的,这天突然发现出现去不掉的白底,想来想去就是前几天hbuilder更新过一次。

    2021-12-29 15:56

DCloud_iOS_XHY

DCloud_iOS_XHY

给组件添加一个背景颜色试一下

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

    图3有背景色的

    2021-04-27 14:27

要回复问题请先登录注册