会话添加页面显示

components/chat-container.vue

 <template>
 <template>
-  <div class="chat-container">
+  <div class="chat-container" :class="{'is-in-page': isInPage}">
     <div class="search-wrap">
     <div class="search-wrap">
       <el-input
       <el-input
         class="keyword-input"
         class="keyword-input"
@@ -10,7 +10,7 @@
         clearable
         clearable
         @clear="search"
         @clear="search"
       ></el-input>
       ></el-input>
-      <i class="close-btn el-icon-close" @click="$emit('close')"></i>
+      <i v-if="!isInPage" class="close-btn el-icon-close" @click="$emit('close')"></i>
     </div>
     </div>
     <chat-list :searchKeyword="searchKeyword" ref="chatListComp" />
     <chat-list :searchKeyword="searchKeyword" ref="chatListComp" />
     <div class="chat-content-wrap">
     <div class="chat-content-wrap">
@@ -34,6 +34,8 @@ import buttonThrottle from "../utils/button-throttle";
   }
   }
 })
 })
 export default class ChatContainer extends Vue {  
 export default class ChatContainer extends Vue {  
+  @Prop(Boolean) isInPage: boolean;
+
   @chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE)
   @chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE)
   private readonly chatVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
   private readonly chatVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
 
 
@@ -57,6 +59,9 @@ export default class ChatContainer extends Vue {
 <style lang="less">
 <style lang="less">
   .chat-container {
   .chat-container {
     height: 70vh;
     height: 70vh;
+    &.is-in-page {
+      height: 100%;
+    }
   }
   }
   .keyword-input {
   .keyword-input {
     width: 300px;
     width: 300px;