HolyKnightIX 1 anno fa
parent
commit
2a50d3b848
1 ha cambiato i file con 34 aggiunte e 13 eliminazioni
  1. +34
    -13
      src/views/realTimeChat/realTimeChat.vue

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

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



Caricamento…
Annulla
Salva