添加会话输入高度拖拽

components/chat-room.vue

 <template>
     <div class="chat-room-con h-100 pos-rel">
         <div class="chat-panel">
-            <div class="chat-area h-100">
-                <template v-if="notOnlyCheck">
-                    <div class="chat-messages pos-rel" :class="{'is-not-chat-member': !isChatMember}">
-                        <div
-                            v-if="getCurrentInputingPeople.length"
-                            class="someone-inputing"
-                        >
-                            {{ getCurrentInputingPeople }}正在输入
-                        </div>
-                        <messages />
+            <div class="chat-area h-100" ref="chatBox">
+                <div ref="top" class="chat-messages pos-rel" :class="{'is-not-chat-member': !isChatMember}">
+                    <div
+                        v-if="getCurrentInputingPeople.length"
+                        class="someone-inputing"
+                    >
+                        {{ getCurrentInputingPeople }}正在输入
                     </div>
-                    <div class="chat-input" v-if="isChatMember">
-                        <message-input @error="onError" />
-                    </div>
-                </template>
-                <template v-else>
                     <messages />
-                </template>
+                </div>
+                <div class="resize" title="收缩侧边栏" ref="resize" @mousedown="dragControllerDiv" v-if="isChatMember"></div>
+                <div ref="bottom" class="chat-input" v-if="isChatMember">
+                    <message-input @error="onError" />
+                </div>
             </div>
         </div>
     </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Provide, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Provide, Vue, Watch, Ref } from "vue-property-decorator";
 
 import MessageInput from "@/customer-service/components/message-input.vue";
 import messages from "@/customer-service/components/message-list.vue";
@@ -39,6 +35,11 @@ type RoomInfoTab = "customer" | "order";
     },
 })
 export default class ChatRoom extends Vue {
+    @Ref("chatBox") chatBox: Element;
+    @Ref("top") refTop: Element;
+    @Ref("bottom") refBottom: Element;
+    @Ref("resize") refResize: Element;
+
     @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
     private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
@@ -91,10 +92,6 @@ export default class ChatRoom extends Vue {
         return result ?? {};
     }
 
-    private get notOnlyCheck(): boolean {
-        return true;
-    }
-
     private get customerInfoTabShow() {
         return this.activeTab === "customer";
     }
@@ -108,6 +105,42 @@ export default class ChatRoom extends Vue {
         console.error(msg);
         this.$message.error(msg);
     }
+
+    private dragControllerDiv(e:MouseEvent) {
+        let resize = this.refResize as any;
+        let top = this.refTop as HTMLElement;
+        let bottom = this.refBottom as HTMLElement;
+        let box = this.chatBox as HTMLElement;
+
+        //颜色改变提醒
+        // resize.style.background = '#ccc';
+        let startY = e.clientY;
+        let originTop = resize.offsetTop;
+        // 鼠标拖动事件
+        document.onmousemove = function (e) {
+            let endY = e.clientY;
+            let moveLen = originTop + (endY - startY); // (endY-startY) = 移动的距离。originTop + 移动的距离 = 顶部区域最后的高度
+            if (moveLen < 300) moveLen = 300; // 上部区域的最小高度为300px
+            if (box.clientHeight - moveLen < 150) {
+                moveLen = box.clientHeight - 150;
+            }
+            let bottomHeight = box.clientHeight - moveLen;
+
+            resize.style.top = moveLen + 'px'; // 设置左侧区域的宽度
+            top.style.height = moveLen + 'px';
+            bottom.style.height = bottomHeight + 'px';
+        };
+        // 鼠标松开事件
+        document.onmouseup = function (evt) {
+            //颜色恢复
+            // resize.style.background = 'transparent';
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+        };
+        resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+        return false;
+    }
 }
 </script>
 
@@ -135,9 +168,6 @@ export default class ChatRoom extends Vue {
         display: inline-block;
         vertical-align: top;
     }
-    .chat-area {
-        width: 100%;
-    }
     .chat-info {
         width: 349px;
         border-left: 1px solid #e1e1e1;
@@ -163,8 +193,9 @@ export default class ChatRoom extends Vue {
     }
 }
 .chat-area {
-    --input-height: 130px;
-
+    position: relative;
+    width: 100%;
+    overflow: hidden;
     .chat-messages {
         height: calc(100% - 130px + 1px);
         border-bottom: 1px solid #e1e1e1;
@@ -173,7 +204,14 @@ export default class ChatRoom extends Vue {
             border-bottom: none;
         }
     }
-
+    .resize {
+        cursor: row-resize;
+        position: absolute;
+        left: 0;
+        top: calc(100% - 130px + 1px);
+        height: 6px;
+        width: 100%;
+    }
     .chat-input {
         height: var(--input-height);
     }