Browse Source

upload

dev
HolyKnightIX 1 year ago
parent
commit
2a50d3b848
1 changed files with 34 additions and 13 deletions
  1. +34
    -13
      src/views/realTimeChat/realTimeChat.vue

+ 34
- 13
src/views/realTimeChat/realTimeChat.vue View File

@@ -19,19 +19,14 @@
<div class="controlBox" :style="'width:' + screenWidth + 'px;'"> <div class="controlBox" :style="'width:' + screenWidth + 'px;'">
<div :class="isExpend ? 'chatBox' : 'chatBox expand'"> <div :class="isExpend ? 'chatBox' : 'chatBox expand'">
<div class="item top">聊天记录</div> <div class="item top">聊天记录</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item center">已经到底啦</div>
<div
v-for="item in chatList"
:class="item.type == 0 ? 'item left' : 'item right'"
>
{{ item.type == 0 ? `我:${item.msg}` : `${item.msg}:你` }}
</div>
<div v-if="chatList.length > 0" class="item center">已经到底啦</div>
<div v-if="chatList.length == 0" class="item noMsg">暂无聊天记录哦</div>
</div> </div>


<div class="itemBox left" @click="sendMessage"> <div class="itemBox left" @click="sendMessage">
@@ -90,6 +85,24 @@ export default {
screenWidth: document.documentElement.clientWidth, screenWidth: document.documentElement.clientWidth,
screenHeight: document.documentElement.clientHeight, screenHeight: document.documentElement.clientHeight,
socket: null, socket: null,
chatList: [
{
type: 0,
msg: "你好!",
},
{
type: 1,
msg: "你好!",
},
{
type: 0,
msg: "你好!",
},
{
type: 1,
msg: "你好!",
},
],
}; };
}, },
computed: { computed: {
@@ -183,6 +196,14 @@ export default {
} }
&.center { &.center {
text-align: center; text-align: center;
margin-top: 40px;
}
&.noMsg {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
text-align: center;
} }
} }




Loading…
Cancel
Save