联想样式

src/views/smart-ask-answer/assistant/chat.vue

@@ -20,6 +20,13 @@
     <div class="chat-input">
       <div class="chat-input-block" v-loading="state.loading">
         <div class="chat-input-block-main">
+          <div class="chat-input-block-main-auto" ref="ref_auto">
+            <div class="chat-input-block-main-auto-list">
+              <template v-for="item in state.autoList">
+                <div class="chat-input-block-main-auto-item">啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发啊沙发沙发</div>
+              </template>
+            </div>
+          </div>
           <textarea
             ref="ref_text"
             placeholder="请输入您的问题"
@@ -73,9 +80,11 @@ const state: any = reactive({
   ],
   goodMap: new Map(),
   badMap: new Map(),
+  autoList: []
 })
 const ref_text = ref()
 const ref_chatMsg = ref()
+const ref_auto = ref()
 const onSend = () => {
   state.loading = true
   state.params.query = state.text + ''
@@ -190,13 +199,53 @@ const onNormal = (item) => {
     }
   })
 }
-onMounted(() => {
-  initChat()
-  ref_text.value.addEventListener('input', (e) => {
-    const textarea = ref_text.value
+const initTextHandle = () => {
+  let debounceTimer;
+  const DEBOUNCE_TIME = 300;
+  const textarea = ref_text.value
+  const floatingDiv = ref_auto.value
+
+  textarea.addEventListener('input', (e) => {
     textarea.style.height = 'auto';
     textarea.style.height = Math.min(textarea.scrollHeight + 2, 200) + 'px';
+    clearTimeout(debounceTimer);
+    floatingDiv.style.display = 'none';
+    if (e.target.value) {
+      debounceTimer = setTimeout(() => {
+        updateFloatingDivPosition(e.target);
+      }, DEBOUNCE_TIME)
+    } else {
+      floatingDiv.style.display = 'none';
+    }
+  });
+
+  textarea.addEventListener('blur', function() {
+    setTimeout(() => {
+      floatingDiv.style.display = 'none';
+    }, 200);
+  });
+
+  textarea.addEventListener('focus', function(e) {
+    floatingDiv.style.maxWidth = (textarea.clientWidth + 32) + 'px';
+    if (e.target.value) {
+      updateFloatingDivPosition(e.target);
+      floatingDiv.style.display = 'flex';
+    }
   });
+
+  const updateFloatingDivPosition = (t) => {
+    floatingDiv.style.visibility = 'hidden';
+    floatingDiv.style.display = 'flex';
+    state.autoList = t.value.split('')
+    setTimeout(() => {
+      floatingDiv.style.top = (-floatingDiv.clientHeight - 2 - 20) + 'px';
+      floatingDiv.style.visibility = 'visible';
+    }, 10)
+  }
+}
+onMounted(() => {
+  initChat()
+  initTextHandle()
 })
 defineExpose({setText})
 </script>
@@ -233,6 +282,32 @@ $scrollRight: 16px;
       flex-direction: column;
       padding: 16px;
       .chat-input-block-main {
+        position: relative;
+        .chat-input-block-main-auto {
+          position: absolute;
+          padding: 12px 16px;
+          background: #FFFFFF;
+          box-shadow: 0px 8px 16px 0px rgba(210,219,232,0.35);
+          border-radius: 16px;
+          border: 1px solid #E6E7EE;
+          min-width: 200px;
+          display: none;
+          max-height: 200px;
+          left: -16px;
+          overflow: hidden;
+          width: max-content;
+          .chat-input-block-main-auto-list {
+            flex: 1;
+            overflow-y: auto;
+            .chat-input-block-main-auto-item {
+              padding: 6px 0;
+              border-bottom: 1px dashed #D8DAE5;
+              &:last-child {
+                border-bottom: none;
+              }
+            }
+          }
+        }
         >textarea {
           width: 100%;
           resize: none;