功能类型是微信聊天气泡那样，文字到一定长度后自动换行。现在的问题是：如果将view设置成一个固定宽度 就会自动换行。但问题是，设置固定宽度肯定不行，因为文字很少的时候，那个气泡也是固定的宽度，就很奇怪！
全栈工程师
- 发布：2021-01-07 17:46
- 更新：2021-04-16 13:44
- 阅读：3187
全栈工程师 (作者)
嗯，看了 和我的处理方式一样。谢谢
2021-01-13 15:12
7***@qq.com
回复 全栈工程师: 怎么处理的你说一下啊大哥
2021-05-14 10:11
2***@qq.com
回复 7***@qq.com: 就是这个，根据字符串长度判断
================
textClass() {
var textClass = 'text'
let ll = this.data.text.replace(/[\u0000-\u007f]/g,"a").replace(/[\u0080-\u07ff]/g,"aa").replace(/[\u0800-\uffff]/g,"aa").length
if(ll>25){
textClass += ' exceed'
}
if(this.self){
textClass+= ' selfText'
}
return textClass
}
2021-11-01 21:21
2***@qq.com
回复 7***@qq.com: <template>
<view class="box" :class="{self:self}">
<image :src="data.avatarUrl||avatarUrl" mode="widthFix" class="avatarUrl"></image>
<view class="content" @longpress="copy">
<text v-if="self" class="username">{{data.username||"我自己"}}</text>
<image @click="previewImage(data.img)" v-if="data.img&&data.img!='undefined'" :src="data.img" class="contentImg" mode="aspectFill"/>
<view @click="playVoice(data.voice)" v-else-if="data.voice&&data.voice!='undefined'" class="text selfText">
<uni-icons type="sound-filled" size="25" color="#FFFFFF"></uni-icons>
</view>
<text v-else :class="textClass">{{data.text}}</text>
</view>
</view>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
computed: {
...mapState({
mineId: state=>state.storeMsgList.mineId,
}),
/ self(){
return this.mineId == this.data.senderId
}, /
textClass() {
var textClass = 'text'
let ll = this.data.text.replace(/[\u0000-\u007f]/g,"a").replace(/[\u0080-\u07ff]/g,"aa").replace(/[\u0800-\uffff]/g,"aa").length
if(ll>25){
textClass += ' exceed'
}
if(this.self){
textClass+= ' selfText'
}
return textClass
}
},
methods:{
playVoice(url){
console.log("playVoice",url);
var innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = url;
innerAudioContext.play();
},
previewImage(url){
uni.previewImage({
urls:[url]
})
},
copy(){
console.log('ccc');
uni.setClipboardData({
data: this.data.text,
success: function () {
console.log('success');
}
});
},
},
data() {
return {
username:"用户名",
avatarUrl:"../..//static/logo.png",
};
},
props: {
data: {
type: Object,
default(){
return {
text:"你好",
avatarUrl:"../..//static/logo.png",
username:"大大"
}
}
},
self:{
type: Boolean,
default(){
return false
}
}
},
}
</script>
<style lang="less">
.box{
width: 750rpx;
flex-direction: row;
justify-content: flex-start;
padding: 0 16rpx;
margin: 16rpx 0;
/ border-style: solid;
border-width: 1px;
border-color: #2C405A; /
}
.avatarUrl{
width :100rpx;
height:100rpx;
border-radius: 10px;
}
.content{
margin:0 16rpx;
flex-direction: column;
justify-content: flex-start;
}
.username{
font-size: 26rpx;
color: #666666;
margin: 8rpx 0;
}
.text{
padding:28rpx;
border-radius: 10px;
font-size: 32rpx;
line-height: 20px;
justify-content: space-between;
background-color: #FFFFFF;
}
.contentImg{
width: 200rpx;
height: 200rpx;
}
.selfText{
background-color: #4CD964;
}
.exceed{
width: 500rpx;
}
.self{
flex-direction: row-reverse;
}
.selfIcon{
//transform: rotate(180deg);
}
</style>
2021-11-01 21:24