回车发送消息

src/views/recruit/components/message/components/chatting.vue

@@ -60,7 +60,7 @@
                 ></v-img>
               </v-avatar>
             </div>
-            <div class="message-text">{{ val.payload.content }}</div>
+            <div class="message-text" :class="{ active: val.from_uid === IM.uid}">{{ val.payload.content }}</div>
           </div>
         </div>
       </div>
@@ -71,12 +71,13 @@
         <v-textarea
           v-model="inputVal"
           label="请输入消息"
-          placeholder="请输入消息"
+          placeholder="请输入消息 按Ctrl+Enter换行"
           hide-details
           no-resize
           bg-color="white"
           variant="plain"
           :disabled="Object.keys(info).length === 0"
+          @keydown="handleKeyDown"
         >
           <!-- @keydown.stop.prevent="handleKeyDown" -->
           <template #append-inner>
@@ -130,7 +131,7 @@ const loading = ref(false)
 const mAvatar = userStore.baseInfo?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'
 
 const chatRef = ref()
-const inputVal = ref()
+const inputVal = ref('')
 const pullDowning = ref(false) // 下拉中
 const pulldownFinished = ref(false) // 下拉完成
 
@@ -215,12 +216,18 @@ const changeOverlay = (val) => {
 const changeLoading = (val) => {
   loading.value = val
 }
-// const handleKeyDown = (event) => {
-//   if (event.keyCode === 13) {
-    
-//     console.log(event)
-//   } 
-// }
+const handleKeyDown = (event) => {
+  if (event.keyCode === 13) {
+    event.preventDefault()
+    if(event.ctrlKey) {
+      // 换行
+      inputVal.value += '\n'
+      return
+    }
+    // 发送
+    emits('handleSend', inputVal)
+  } 
+}
 const reset = () => {
   inputVal.value = ''
 }
@@ -295,7 +302,7 @@ defineExpose({
   .message-view_item {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     margin: 8px 0;
     position: relative;
     .message-text {
@@ -303,6 +310,9 @@ defineExpose({
       border-radius: 6px;
       max-width: 85%;
       padding: 10px;
+      &.active {
+        background: #d5e6e8;
+      }
     }
   }
   .is-self {