La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

聊天窗口优化

master
xie.bx 2 years ago
parent
a548f056f5
commit
e08242c986
2 changed files with 44 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 46
      im-ui/src/components/chat/ChatMessageItem.vue
  2. 23
      im-uniapp/components/chat-message-item/chat-message-item.vue

46
im-ui/src/components/chat/ChatMessageItem.vue
View File

@ -11,34 +11,41 @@
<chat-time :time="msgInfo.sendTime"></chat-time> <chat-time :time="msgInfo.sendTime"></chat-time>
</div> </div>
<div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)"> <div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)">
<span class="chat-msg-text" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT" v-html="$emo.transform(msgInfo.content)"></span> <span class="chat-msg-text" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT"
v-html="$emo.transform(msgInfo.content)"></span>
<div class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE"> <div class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
<div class="img-load-box" v-loading="loading" element-loading-text="上传中.." element-loading-background="rgba(0, 0, 0, 0.4)"> <div class="img-load-box" v-loading="loading" element-loading-text="上传中.."
<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl" @click="showFullImageBox()" /> element-loading-background="rgba(0, 0, 0, 0.4)">
<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"
@click="showFullImageBox()" />
</div> </div>
<span title="发送失败" v-show="loadFail" @click="handleSendFail" class="send-fail el-icon-warning"></span> <span title="发送失败" v-show="loadFail" @click="handleSendFail"
class="send-fail el-icon-warning"></span>
</div> </div>
<div class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE"> <div class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE">
<div class="chat-file-box" v-loading="loading"> <div class="chat-file-box" v-loading="loading">
<div class="chat-file-info"> <div class="chat-file-info">
<el-link class="chat-file-name" :underline="true" target="_blank" type="primary" :href="data.url">{{data.name}}</el-link> <el-link class="chat-file-name" :underline="true" target="_blank" type="primary"
:href="data.url">{{data.name}}</el-link>
<div class="chat-file-size">{{fileSize}}</div> <div class="chat-file-size">{{fileSize}}</div>
</div> </div>
<div class="chat-file-icon"> <div class="chat-file-icon">
<span type="primary" class="el-icon-document"></span> <span type="primary" class="el-icon-document"></span>
</div> </div>
</div> </div>
<span title="发送失败" v-show="loadFail" @click="handleSendFail" class="send-fail el-icon-warning"></span> <span title="发送失败" v-show="loadFail" @click="handleSendFail"
class="send-fail el-icon-warning"></span>
</div> </div>
<div class="chat-msg-voice" v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO" @click="handlePlayVoice()"> <div class="chat-msg-voice" v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO"
@click="handlePlayVoice()">
<audio controls :src="JSON.parse(msgInfo.content).url"></audio> <audio controls :src="JSON.parse(msgInfo.content).url"></audio>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems" @close="rightMenu.show=false" <right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems"
@select="handleSelectMenu"></right-menu> @close="rightMenu.show=false" @select="handleSelectMenu"></right-menu>
</div> </div>
</template> </template>
@ -71,7 +78,7 @@
type: Object, type: Object,
required: true required: true
}, },
menu:{ menu: {
type: Boolean, type: Boolean,
default: true default: true
} }
@ -184,8 +191,7 @@
} }
.chat-msg-content { .chat-msg-content {
display: flex; text-align: left;
flex-direction: column;
.chat-msg-top { .chat-msg-top {
display: flex; display: flex;
@ -200,9 +206,11 @@
} }
.chat-msg-bottom { .chat-msg-bottom {
text-align: left; display: inline-block;
padding-right: 80px;
.chat-msg-text { .chat-msg-text {
display: block;
position: relative; position: relative;
line-height: 35px; line-height: 35px;
margin-top: 10px; margin-top: 10px;
@ -210,9 +218,12 @@
background-color: #eeeeee; background-color: #eeeeee;
border-radius: 3px; border-radius: 3px;
color: #333; color: #333;
display: inline-block; display: block;
font-size: 17px; font-size: 17px;
overflow-wrap:break-word; text-align: left;
white-space: pre-wrap;
word-break: break-all;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -320,6 +331,7 @@
} }
.chat-msg-content { .chat-msg-content {
text-align: right;
.chat-msg-top { .chat-msg-top {
flex-direction: row-reverse; flex-direction: row-reverse;
@ -331,13 +343,13 @@
} }
.chat-msg-bottom { .chat-msg-bottom {
text-align: right; padding-left: 80px;
padding-right: 0;
.chat-msg-text { .chat-msg-text {
margin-left: 10px; margin-left: 10px;
background-color: #5fb878; background-color: #5fb878;
color: #fff; color: #fff;
display: inline-block;
vertical-align: top; vertical-align: top;
&:after { &:after {

23
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -223,8 +223,7 @@
.chat-msg-content { .chat-msg-content {
display: flex; text-align: left;
flex-direction: column;
.chat-msg-top { .chat-msg-top {
display: flex; display: flex;
@ -239,8 +238,8 @@
} }
.chat-msg-bottom { .chat-msg-bottom {
text-align: left; display: inline-block;
padding-right: 120rpx ;
.chat-msg-text { .chat-msg-text {
position: relative; position: relative;
line-height: 30px; line-height: 30px;
@ -249,12 +248,12 @@
background-color: #eeeeee; background-color: #eeeeee;
border-radius: 3px; border-radius: 3px;
color: #333; color: #333;
display: inline-block;
font-size: 16px; font-size: 16px;
text-align: left;
display: block;
word-break: break-all; word-break: break-all;
white-space: pre-line; white-space: pre-line;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -370,7 +369,7 @@
} }
.chat-msg-content { .chat-msg-content {
text-align: right;
.chat-msg-top { .chat-msg-top {
flex-direction: row-reverse; flex-direction: row-reverse;
@ -381,19 +380,17 @@
} }
.chat-msg-bottom { .chat-msg-bottom {
text-align: right; padding-left: 120rpx ;
padding-right: 0;
.chat-msg-text { .chat-msg-text {
margin-left: 10px; margin-left: 10px;
background-color: #5fb878; background-color: #45ab62;
color: #fff; color: #fff;
display: inline-block;
vertical-align: top;
&:after { &:after {
left: auto; left: auto;
right: -10px; right: -10px;
border-top-color: #5fb878; border-top-color: #45ab62;
} }
} }

Write Preview
Loading…
Cancel
Save