refactor: delete `clipboardjs` (#2727)

text copying can be done without using additional libraries

2 files changed, 13 insertions, 24 deletions

diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 94e750c7..117dd640 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -10,7 +10,7 @@
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
+            <canvas @click="copyToClipboard(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
@@ -18,7 +18,7 @@
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
+            <canvas @click="copyToClipboard(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
@@ -27,7 +27,7 @@
       <tr-qr-box class="qr-box">
         <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
         <tr-qr-bg class="qr-bg">
-          <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
+          <canvas @click="copyToClipboard(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
         </tr-qr-bg>
       </tr-qr-box>
     </template>
@@ -41,7 +41,6 @@
     dbInbound: new DBInbound(),
     client: null,
     qrcodes: [],
-    clipboard: null,
     visible: false,
     subId: '',
     show: function(title = '', dbInbound, client) {
@@ -79,14 +78,10 @@
       qrModal: qrModal,
     },
     methods: {
-      copyToClipboard(elementId, content) {
-        this.qrModal.clipboard = new ClipboardJS('#' + elementId, {
-          text: () => content,
-        });
-        this.qrModal.clipboard.on('success', () => {
+      copyToClipboard(content) {
+        return copyToClipboard(content).then(() => {
           app.$message.success('{{ i18n "copied" }}')
-          this.qrModal.clipboard.destroy();
-        });
+        })
       },
       setQrCode(elementId, content) {
         new QRious({
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index d668c792..36589199 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -7,7 +7,7 @@
             :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
             :download="txtModal.fileName">[[ txtModal.fileName ]]
         </a-button>
-            <a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
+        <a-button type="primary" @click="txtModal.copy(txtModal.content)">{{ i18n "copy" }}</a-button>
     </template>
     <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
         :autosize="{ minRows: 10, maxRows: 20}"></a-input>
@@ -20,24 +20,18 @@
         content: '',
         fileName: '',
         qrcode: null,
-        clipboard: null,
         visible: false,
         show: function (title = '', content = '', fileName = '') {
             this.title = title;
             this.content = content;
             this.fileName = fileName;
             this.visible = true;
-            textModalApp.$nextTick(() => {
-                if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#copy-btn', {
-                        text: () => this.content,
-                    });
-                    this.clipboard.on('success', () => {
-                        app.$message.success('{{ i18n "copied" }}')
-                        this.close();
-                    });
-                }
-            });
+        },
+        copy: function (content = '') {
+            copyToClipboard(content).then(() => {
+                app.$message.success('{{ i18n "copied" }}')
+                this.close();
+            })
         },
         close: function () {
             this.visible = false;