|
|
@@ -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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|