fix(copy): fixed copy bug

emqx · Jun 24, 2022 · 7bd4a42 · 7bd4a42
1 parent cb9744e
commit 7bd4a42
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@element-plus/icons-vue": "^1.1.0",
     "@types/lodash": "^4.14.177",
     "axios": "^0.21.4",
+    "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.5",
     "echarts": "^5.2.1",
     "element-plus": "^2.2.2",

diff --git a/src/common/tools.ts b/src/common/tools.ts
@@ -126,39 +126,6 @@ export const createRandomString = (length = 8) => {
   }, '')
 }
 
-export const fallbackCopyTextToClipboard = async (text: string) => {
-  const textArea = document.createElement('textarea')
-  textArea.value = text
-
-  textArea.style.top = '0'
-  textArea.style.left = '0'
-  textArea.style.position = 'fixed'
-
-  document.body.appendChild(textArea)
-  textArea.focus()
-  textArea.select()
-
-  try {
-    const successful = document.execCommand('copy')
-    if (successful) {
-      return Promise.resolve()
-    } else {
-      return Promise.reject()
-    }
-  } catch (err) {
-    return Promise.reject()
-  } finally {
-    document.body.removeChild(textArea)
-  }
-}
-
-export const copyToClipboard = (text: string) => {
-  if (!navigator.clipboard) {
-    return fallbackCopyTextToClipboard(text)
-  }
-  return navigator.clipboard.writeText(text)
-}
-
 interface SQLKeywords {
   fieldStr: string
   fromStr: string

diff --git a/src/hooks/useCopy.ts b/src/hooks/useCopy.ts
@@ -1,7 +1,7 @@
-import { onBeforeUnmount } from 'vue'
+import copy from 'copy-to-clipboard'
 import { ElMessage } from 'element-plus'
+import { onBeforeUnmount } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { copyToClipboard } from '@/common/tools'
 
 export default function useCopy(callback?: () => void): {
   copyText: (text: string) => Promise<void>
@@ -11,7 +11,7 @@ export default function useCopy(callback?: () => void): {
   let copyShowTimeout: null | number = null
   const copyText = async (text: string) => {
     try {
-      await copyToClipboard(text)
+      copy(text)
       copySuccess()
     } catch (error) {
       ElMessage.success(t('Base.opErr'))

diff --git a/src/views/RuleEngine/components/SQLTemplate.vue b/src/views/RuleEngine/components/SQLTemplate.vue
@@ -71,13 +71,14 @@ export default defineComponent({
 </script>
 
 <script setup lang="ts">
-import { ref, Ref, defineEmits } from 'vue'
-import { useI18n } from 'vue-i18n'
+import SQLTemplates from '@/common/SQLTemplates'
+import { createRandomString, stringifyObjSafely } from '@/common/tools'
+import Monaco from '@/components/Monaco.vue'
+import useCopy from '@/hooks/useCopy'
 import { CopyDocument } from '@element-plus/icons-vue'
-import { copyToClipboard, createRandomString, stringifyObjSafely } from '@/common/tools'
 import { ElMessage } from 'element-plus'
-import Monaco from '@/components/Monaco.vue'
-import SQLTemplates from '@/common/SQLTemplates'
+import { defineEmits, ref, Ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface TemplateItem {
   title: string
@@ -116,10 +117,10 @@ const useSQL = (SQLContent: string) => {
   emit('use-sql', SQLContent)
 }
 
+const { copyText: execCopy } = useCopy()
 const copyText = async (text: string) => {
   try {
-    await copyToClipboard(text)
-    ElMessage.success(t('Base.copied'))
+    execCopy(text)
   } catch (error) {
     ElMessage.error(t('Base.opErr'))
   }

diff --git a/yarn.lock b/yarn.lock
@@ -3961,6 +3961,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
@@ -10986,6 +10993,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"