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