3***@qq.com
3***@qq.com
  • 发布:33 分钟前
  • 更新:33 分钟前
  • 阅读:30

rich-text 显示不完整 私自切割内容导致文字无故换行bug

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 5.26

手机系统: Android

手机系统版本号: Android 16

手机厂商: 小米

手机机型: redmik80

页面类型: nvue

vue版本: vue3

打包方式: 离线

项目创建方式: HBuilderX

示例代码:

<template>
<view style="border:1px solid red">
<view class="rich">
<rich-text user-select="true" mode="native" :nodes="str"></rich-text>
</view>
<!-- <n-chat>
<n-message text="想要提升写作能力,就要在平时的学习过程中,不断的积累好词好句,多读范文,对于好句好段,要多进行仿写,写得多了,就能有自己的写作方法和技巧了"></n-message>
<n-message reverse text="想要提升写作能力,就要在平时的学习过程中,不断的积累好词好句,多读范文,对于好句好段,要多进行仿写,写得多了,就能有自己的写作方法和技巧了"></n-message>
</n-chat> -->
</view>
</template>

<script setup lang="uts">
const title = ref('Hello')
let str=ref('')
function getRandomAvatar() : string {
const seed = Math.floor(Math.random() 99999) + 1
const bgColors = ['b6e3f4', 'ffdfbf', 'd1f7c4', 'ffc0cb', 'c1e1ff', 'e2c9ff']
const bg = bgColors[Math.floor(Math.random()
bgColors.length)]
return https://api.dicebear.com/10.x/avataaars/svg?seed=${seed}&backgroundColor=${bg}
}
setTimeout(()=>{
str.value=<div style="word-wrap:break-word;border:1px solid red; margin-top:10px;"> <span style="font-weight: 400;">想&#8203;</span><span style="font-weight: 400;">要&#8203;</span><span style="font-weight: 400;">提&#8203;</span><span style="font-weight: 400;">升&#8203;</span><span style="font-weight: 400;">写&#8203;</span><span style="font-weight: 400;">作&#8203;</span><span style="font-weight: 400;">能&#8203;</span><span style="font-weight: 400;">力&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">就&#8203;</span><span style="font-weight: 400;">要&#8203;</span><span style="font-weight: 400;">在&#8203;</span><span style="font-weight: 400;">平&#8203;</span><span style="font-weight: 400;">时&#8203;</span><span style="font-weight: 400;">的&#8203;</span><span style="font-weight: 400;">学&#8203;</span><span style="font-weight: 400;">习&#8203;</span><span style="font-weight: 400;">过&#8203;</span><span style="font-weight: 400;">程&#8203;</span><span style="font-weight: 400;">中&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">不&#8203;</span><span style="font-weight: 400;">断&#8203;</span><span style="font-weight: 400;">的&#8203;</span><span style="font-weight: 400;">积&#8203;</span><span style="font-weight: 400;">累&#8203;</span><span style="font-weight: 400;">好&#8203;</span><span style="font-weight: 400;">词&#8203;</span><span style="font-weight: 400;">好&#8203;</span><span style="font-weight: 400;">句&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">多&#8203;</span><span style="font-weight: 400;">读&#8203;</span><span style="font-weight: 400;">范&#8203;</span><span style="font-weight: 400;">文&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">对&#8203;</span><span style="font-weight: 400;">于&#8203;</span><span style="font-weight: 400;">好&#8203;</span><span style="font-weight: 400;">句&#8203;</span><span style="font-weight: 400;">好&#8203;</span><span style="font-weight: 400;">段&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">要&#8203;</span><span style="font-weight: 400;">多&#8203;</span><span style="font-weight: 400;">进&#8203;</span><span style="font-weight: 400;">行&#8203;</span><span style="font-weight: 400;">仿&#8203;</span><span style="font-weight: 400;">写&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">写&#8203;</span><span style="font-weight: 400;">得&#8203;</span><span style="font-weight: 400;">多&#8203;</span><span style="font-weight: 400;">了&#8203;</span><span style="font-weight: 400;">,&#8203;</span><span style="font-weight: 400;">就&#8203;</span><span style="font-weight: 400;">能&#8203;</span><span style="font-weight: 400;">有&#8203;</span><span style="font-weight: 400;">自&#8203;</span><span style="font-weight: 400;">己&#8203;</span><span style="font-weight: 400;">的&#8203;</span><span style="font-weight: 400;">写&#8203;</span><span style="font-weight: 400;">作&#8203;</span><span style="font-weight: 400;">方&#8203;</span><span style="font-weight: 400;">法&#8203;</span><span style="font-weight: 400;">和&#8203;</span><span style="font-weight: 400;">技&#8203;</span><span style="font-weight: 400;">巧&#8203;</span><span style="font-weight: 400;">了&#8203;</span> </div>
},500)
function handleMenuClick(e) {
console.log('e', e)
}
</script>

<style>
.logo {
height: 100px;
width: 100px;
margin: 100px auto 25px auto;
}

.title {  
    font-size: 18px;  
    color: #8f8f94;  
    text-align: center;  
}  
.rich{  
    max-width: 500rpx;  
    border-radius: 10rpx;  
    background: pink;  
    padding:20rpx;  
}  

</style>

操作步骤:

uniappx 浏览器端没问题就在app端出现这个问题

预期结果:

预取结果

实际结果:

必须长按选择才会显示完全

bug描述:

显示不全 长按之后才会显示完全 并且多创建了一个div

33 分钟前 负责人:无 分享
已邀请:

要回复问题请先登录或注册