fix: 修复复制

package.json

@@ -17,12 +17,13 @@
     "autosize": "^5.0.1",
     "axios": "^0.21.1",
     "bitcoinjs-lib": "^5.2.0",
+    "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
     "dexie": "^3.0.3",
     "enc-utils": "^3.0.0",
-    "node-sass": "^4.14.1",
     "js-base64": "^3.7.2",
+    "node-sass": "^4.14.1",
     "prepend-http": "^4.0.0",
     "quasar": "^2.0.4",
     "sass-loader": "^8.0.0",

src/App.vue

@@ -3,6 +3,10 @@
     <div id="nav" class="min-h-screen" style="background:#F7F7FA">
       <router-view />
     </div>
+    <!-- Target -->
+    <input id="clipboardInput" :value="clipboardValue" />
+    <!-- Trigger -->
+    <button class="clipboardBtn" ref="btn" data-clipboard-target="#clipboardInput"></button>
   </van-config-provider>
 </template>
 
@@ -11,7 +15,7 @@ import { ref } from "@vue/reactivity";
 import { connectionState } from "./store/connectionStore";
 import FzmMessageProtocol from "@/utils/fzm-message-protocol";
 import { generateToken } from "./utils/generateToken/generate-token";
-import { defineComponent, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from "vue";
+import { defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from "vue";
 import decodeChatMessage from "./utils/fzm-message-protocol-chat/decodeChatMessage";
 import ChatDBService from "@/db/ChatDBService"
 import { getMasterIdFromDisplayMsg, getTargetIdFromDisplayMsg } from "./utils/chatutils";
@@ -25,11 +29,34 @@ import router from "./router";
 import { useRoute } from "vue-router";
 import Bridge from '@/utils/jsBridge2'
 import { chatAuthCheck } from "./utils/authCheck";
-import { notchHeight } from "./store/AppStore";
+import { clipboardValue, notchHeight } from "./store/AppStore";
+import ClipboardJS from "clipboard"
 
 
 export default defineComponent({
   setup() {
+    const btn = ref<HTMLButtonElement | null>(null)
+
+    onMounted(() => {
+      const clipboard = new ClipboardJS('.clipboardBtn');
+      clipboard.on('success', function (e) {
+        Toast.success('复制成功')
+      });
+
+      clipboard.on('error', function (e) {
+        Toast.fail("复制失败")
+      });
+    })
+
+    watch(clipboardValue, (newValue) => {
+      if (newValue !== '') {
+        nextTick(() => {
+          btn.value?.click();
+          clipboardValue.value = '';
+        })
+      }
+    })
+
 
     onBeforeMount(() => {
       setTimeout(() => {
@@ -164,6 +191,8 @@ export default defineComponent({
       connectionState.connection?.disconnect();
     });
     return {
+      btn,
+      clipboardValue
     }
   }
 })

src/store/AppStore.ts

 import { ref } from '@vue/runtime-dom'
 
 export const notchHeight = ref(0)
+
+export const clipboardValue = ref('')
\ No newline at end of file

src/views/Chat/ChatContentMessage.vue

@@ -2,17 +2,16 @@
   <div>
     <div v-if="!hideDatetime" class="text-xs text-gray-400 text-center pb-2 pt-4">{{ time }}</div>
     <!-- 卡片消息 -->
-    <ChatContentMessageCardVue
-      v-if="type === 6"
-      :from-myself="fromMyself"
-      :content="content"
-    ></ChatContentMessageCardVue>
+    <ChatContentMessageCardVue v-if="type === 6" :from-myself="fromMyself" :content="content"></ChatContentMessageCardVue>
     <div
       class="flex items-start flex-nowrap w-screen py-1.5"
       :class="{ 'flex-row-reverse': fromMyself }"
     >
       <!-- 头像  -->
-      <q-avatar class="mx-4 min-w-chat-msg-avatar w-chat-msg-avatar h-chat-msg-avatar !rounded-md" v-if="type !== 6">
+      <q-avatar
+        class="mx-4 min-w-chat-msg-avatar w-chat-msg-avatar h-chat-msg-avatar !rounded-md"
+        v-if="type !== 6"
+      >
         <img :src="default_avatar_url" />
       </q-avatar>
 
@@ -59,7 +58,6 @@
             :uploadProgress="uploadProgress"
           />-->
 
-          
           <!-- 消息状态 -->
           <div class="w-10 self-stretch flex flex-row justify-center items-center">
             <!-- 发送失败 -->
@@ -92,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, PropType } from "vue";
+import { computed, defineComponent, ref, PropType, onMounted } from "vue";
 import default_avatar_url from "@/assets/user_avatar.png";
 import { messageStore } from "@/store/messagesStore";
 import ChatContentMessageTextVue from "./ChatContentMessageText.vue";
@@ -105,6 +103,7 @@ import { copyToClipboard } from 'quasar'
 import { Toast } from "vant";
 import ChatMessageDB from "@/db/ChatMessageDB";
 import { useRoute } from "vue-router";
+import { clipboardValue } from "@/store/AppStore";
 
 
 export default defineComponent({
@@ -163,11 +162,7 @@ export default defineComponent({
       },
       {
         text: '复制', cb(data: { content: any, uuid: string, logid: string }) {
-          copyToClipboard(data.content.content).then(() => {
-            Toast.success('复制成功')
-          }).catch(() => {
-            Toast.fail("复制失败")
-          })
+          clipboardValue.value = data.content.content;
         }
       }
     ]
@@ -191,7 +186,7 @@ export default defineComponent({
       onTextMsgSelect,
       textMsgActions,
       showPopOver,
-      clickItem
+      clickItem,
     };
   },
 });