复制功能兼容h5

src/views/home/right/components/Chat.vue

@@ -34,7 +34,11 @@
           </div>
           <div class="warp">
             <!--            <div class="username">{{ item.fromUsername }}</div>-->
-            <div class="message" @contextmenu="onContextmenu($event,index)" v-html="messageFormat(item.content)"/>
+            <div class="message"
+                 @contextmenu="onContextmenu($event,index)"
+                 @touchstart="onTouchstart($event,index)"
+                 @touchend="onTouchend"
+                 v-html="messageFormat(item.content)"/>
             <div class="time">{{ formatDateTime(item.createdAt) }}</div>
           </div>
         </li>
@@ -299,6 +303,7 @@ export default defineComponent({
       }
       state.message = ''
       state.messageList.push(data)
+      document.getElementById('textarea')?.focus()
       nextTick(() => {
         scrollToBottom()
       })
@@ -386,8 +391,23 @@ export default defineComponent({
 
     let messageHtml: string
     let messageIndex: number
+    let timer: any
     const onContextmenu = (event: any, index: number) => {
-      event.preventDefault(); // 阻止默认的右键菜单弹出
+      event.preventDefault() // 阻止默认的右键菜单弹出
+      showPop(event, index)
+    };
+
+    const onTouchstart = (event: any, index: number) => {
+      timer = setTimeout(() => {
+        showPop(event, index)
+      }, 1000)
+    }
+
+    const onTouchend = () => {
+      clearTimeout(timer)
+    }
+
+    const showPop = (event: any, index: number) => {
       state.pop = {
         isShow: true,
         left: event.clientX + 'px',
@@ -395,8 +415,7 @@ export default defineComponent({
       }
       messageHtml = event.target.innerText
       messageIndex = index
-      return false
-    };
+    }
 
     const copy = () => {
       closePop()
@@ -452,7 +471,9 @@ export default defineComponent({
       selectAction,
       onContextmenu,
       copy,
-      removeMessage
+      removeMessage,
+      onTouchstart,
+      onTouchend
     }
   }
 })
@@ -544,7 +565,8 @@ export default defineComponent({
       .message {
         word-break: break-all;
         text-align: justify;
-        user-select: all;
+        -webkit-user-select: none;
+        user-select: none;
       }
     }