在页面使用组件的时候,自定义的组件是一个聊天的消息框,有一个属性用来表示消息框靠左还是靠右
<template>
<view>
<view v-if="type">
<view class="message message-right">
<view class="message-right-status">
<u-loading-icon v-if="status === 'sending'" size="16"></u-loading-icon>
<u-icon v-if="status === 'fail'" name="error-circle-fill" size="16" color="#fa3534"></u-icon>
</view>
<view class="content content-right">
{{content}}
</view>
<view style="height: 80rpx;padding-right: 16rpx;">
<u-avatar v-if="avatar" :src="avatar"></u-avatar>
<u-avatar v-else :text="nickname.charAt(0)" randomBgColor></u-avatar>
</view>
</view>
</view>
<view v-else>
<view class="message message-left">
<view style="height: 80rpx;padding-left: 16rpx;">
<u-avatar v-if="avatar" :src="avatar"></u-avatar>
<u-avatar v-else :text="nickname.charAt(0)" randomBgColor></u-avatar>
</view>
<view class="content content-left">
{{content}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props:{
//true时消息在右侧,即发送的消息,false时消息在左侧,即接收的消息
type:{
type: [Boolean],
default: false
},
nickname:{
type: [String,Number],
default: '私聊者昵称'
},
avatar:{
type: [String],
default: "/static/common/logo.png"
},
content:{
type: [String],
default: "消息内容"
},
status:{
type: [String],
default: 'none'
}
},
methods: {
}
}
</script>
<style>
.message-time{
text-align: center;
color: #959595;
font-size: 26rpx;
}
.message{
width: 100%;
display: flex;
}
.message-left{
justify-content: flex-start;
}
.message-right{
justify-content: flex-end;
}
.message-right-status{
display: flex;
align-items: flex-end;
padding-right: 16rpx;
}
.content{
max-width: 70%;
min-width: 7%;
margin-top: 40rpx;
word-wrap:break-word;
word-break:break-all;
padding: 14rpx 10rpx 14rpx 18rpx;
border-radius: 20rpx;
font-size: 32rpx;
min-height: 40rpx;
}
.content-left{
margin-left: 4rpx;
background-color: #FFFFFF;
color: #000000;
}
.content-right{
margin-right: 8rpx;
background-color: #3c9cff;
color: #FFFFFF;
}
</style>
在使用v-for把消息遍历出来的时候,给这个组件传type属性,然后在聊天界面,下拉刷新获取历史记录的时候就会报错
cid unmatched at view.umd.min.js:1
TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1
之所以确定是这个属性导致的是因为反复测试了,一个一个属性加上去测试,发现加上这个就不行,猜测是v3编译器对v-if,v-else的不识别还是别的原因吧(看了v3官方发的帖子说是支持v-if,v-else的)
后来通过把一个组件拆成两个(一左一右,不在组件里判断消息框左右)这样就没有报错了
0 个回复