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