处理聊天框无法复制复杂富文本

src/pages/dialog/index.vue

@@ -219,10 +219,19 @@
         </div>
         <div class="load-toolbar pointer" style="transform: scaleY(-1);">
           <span v-if="loadConfig.status == 0">正在加载数据中 ...</span>
-          <span v-if="loadConfig.status == 1 || (loadConfig.status == 2 && !state.localPageLoadDone)" @click="onScrollToLower">
+          <span
+            v-if="
+              loadConfig.status == 1 ||
+              (loadConfig.status == 2 && !state.localPageLoadDone)
+            "
+            @click="onScrollToLower"
+          >
             查看更多消息 ...
           </span>
-          <span v-if="loadConfig.status == 2 && state.localPageLoadDone" class="no-more">
+          <span
+            v-if="loadConfig.status == 2 && state.localPageLoadDone"
+            class="no-more"
+          >
             没有更多消息了
           </span>
         </div>
@@ -616,7 +625,8 @@ const state = ref({
   lastMentionText: '', // 记录上一次触发@时的完整文本内容
   lastMentionTriggered: false, // 记录当前@是否已经触发过
   lastMentionPosition: -1, // 添加新的状态来记录上一次@的位置
-  isLoading: false,//发送按钮loading
+  isLoading: false, //发送按钮loading
+  lastSelection: 0,
 })
 
 uniOnload(async (options) => {
@@ -676,7 +686,8 @@ const handleHidePanel = () => {
 //点击编辑区聚焦输入框
 const onEditorClick = () => {
   handleHidePanel()
-  const quill = getQuill()
+  // const quill = getQuill();
+
   // if (quill.getText().endsWith('@\n')) {
   //   showMentionSelectDebounced(quill)
   // }
@@ -1429,10 +1440,6 @@ const getMentionSelectLists = (mentionSelectList) => {
     )
   })
 
-  // 将光标设置到文本末尾
-  const length = quill.getLength()
-  quill.setSelection(length, 0)
-
   // 清除保存的光标位置
   state.value.lastCursorIndex = undefined
 
@@ -1707,18 +1714,33 @@ onUnmounted(() => {
 // 修改防抖函数的实现
 const showMentionSelectDebounced = (quill) => {
   const text = quill.getText()
-  // 如果文本内容与上次不同，重置触发状态
 
+  // 以下逻辑是 光标与@之间存在其他内容时 不触发选人弹窗
+  const selection = quill.getSelection()
+  if (selection) {
+    state.lastSelection = selection.index
+    if (
+      text[selection.index - 1].charCodeAt(0) !== 64 &&
+      text[selection.index - 1].charCodeAt(0) !== 32 &&
+      text[selection.index - 1].charCodeAt(0) !== 10
+    ) {
+      uni.showToast({
+        title: text[selection.index - 1],
+        icon: 'none',
+      })
+      state.value.lastMentionTriggered = false
+      return
+    }
+  }
+  // 以下逻辑是 记录触发@时，用户的输入框内容，下次一样内容得@不会再次触发
   if (text !== state.value.lastMentionText) {
     state.value.lastMentionTriggered = false
   }
-
   // 如果已经触发过，则不再触发
   if (state.value.lastMentionTriggered) {
     console.log('return')
     return
   }
-
   // 记录当前文本内容和触发状态
   state.value.lastMentionText = text
   state.value.lastMentionTriggered = true
@@ -1997,11 +2019,6 @@ const showMentionSelectDebounced = (quill) => {
 }
 
 .quillBox {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-
   :deep(.ql-clipboard) {
     position: relative;
     opacity: 0;
@@ -2020,19 +2037,10 @@ const showMentionSelectDebounced = (quill) => {
     line-height: 44rpx;
     font-size: 32rpx;
 
-    p {
+    .ed-emoji {
-      display: inline-flex;
+      width: 44rpx;
-      align-items: center;
+      height: 44rpx;
-      justify-content: flex-start;
+      display: inline-block;
-      flex-wrap: wrap;
-      white-space: normal;
-      word-break: break-all;
-
-      .ed-emoji {
-        width: 44rpx;
-        height: 44rpx;
-        display: inline-block;
-      }
     }
   }
 }