优化剪贴板功能 #86

src/config.js

@@ -39,7 +39,7 @@ const tool = [
     {'name': 'json', 'title': 'JSON工具', 'cat': ['conversion', 'serialize']},
     {'name': 'url', 'title': 'URL编码', 'cat': ['conversion']},
     {'name': 'timestamp', 'title': '时间戳', 'cat': ['conversion']},
-    {'name': 'qrCode', 'title': '二维码', 'cat': ['other']},
+    {'name': 'qrCode', 'title': '二维码', 'cat': ['generate']},
     {'name': 'pinyin', 'title': '汉字转拼音', 'cat': ['conversion']},
     {'name': 'ip', 'title': 'IP地址查询', 'cat': ['other']},
     {'name': 'code', 'title': '代码格式化', 'cat': ['other']},

src/tool/clipboard.js

-import {Base64} from "js-base64";
-
+import {isUtools} from '../helper'
 // 剪贴板操作
-export const copy = (data, successCallback) => {
-    try {
-        navigator.clipboard.writeText(data).then(function () {
-            successCallback && successCallback()
-        }, function (e) {
-            console.log('copy failed', e)
-        });
-    } catch (e) {
-        console.log('copy error', e)
+export const copy = (data,successCallback)=>{
+    document.querySelector(
+        '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
+    document.querySelector('#clipboard-text').value = data
+    document.querySelector('#clipboard-text').select()
+    if (document.execCommand('copy')) {
+        successCallback && successCallback()
     }
+    document.querySelector('#clipboard').innerHTML = ''
 }
 
-export const paste = async () => {
-    return new Promise((resolve) => {
-        try {
-            navigator.clipboard.readText().then((text) => {
-                return resolve(text ? text : "")
-            }).catch((e) => {
-                console.error(e)
-                return resolve("")
-            })
-        } catch {
-            resolve("")
-        }
-    });
+export const paste = ()=>{
+    document.querySelector(
+        '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
+    document.querySelector('#clipboard-text').select()
+    document.execCommand('paste')
+    let r = document.querySelector('#clipboard-text').value ||
+        document.querySelector('#clipboard-text').innerHTML
+    document.querySelector('#clipboard').innerHTML = ''
+    return r ? r : ''
 }
 
-export const copyImage = (imageBase64, successCallback = "") => {
-    if (imageBase64) {
-        try {
-            let arr = imageBase64.split(',')
-            let mime = arr[0].match(/:(.*?);/)[1];
-            let data = [new window.ClipboardItem({
-                [mime]: new Blob([Base64.toUint8Array(arr[1])], {type: mime})
-            })];
-            navigator.clipboard.write(data).then(function () {
-                successCallback && successCallback()
-            }, function (e) {
-                console.log('copy image failed', e)
-            });
-        } catch (e) {
-            console.log('copy image error', e)
-        }
+export const copyImage = (imageBase64,successCallback = "")=>{
+    if (isUtools && imageBase64){
+        window.utools.copyImage(imageBase64)
+        successCallback && successCallback()
     }
 }
 

src/tool/model.js

 import config from './config'
+import clipboard from './clipboard'
 import setting from './setting'
 import cache from './cache'
 import history from './history.js'
@@ -43,17 +44,6 @@ const model = {
     }
 }
 
-const clipboardPaste = function () {
-    document.querySelector(
-        '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
-    document.querySelector('#clipboard-text').select()
-    document.execCommand('paste')
-    let r = document.querySelector('#clipboard-text').value ||
-        document.querySelector('#clipboard-text').innerHTML
-    document.querySelector('#clipboard').innerHTML = ''
-    return r ? r : ''
-}
-
 export const plugin = {
     install: function (Vue) {
         Vue.prototype.$getToolData = function (clipboardField = '') {
@@ -63,7 +53,7 @@ export const plugin = {
                     data[clipboardField] = fixeInputData
                     fixeInputData = ""
                 } else if (setting.autoReadCopy()) {
-                    let paste = clipboardPaste()
+                    let paste = clipboard.paste()
                     if (!data[clipboardField] && paste) {
                         if (setting.autoReadCopyFilter()){
                             paste = paste.trim()
@@ -79,16 +69,17 @@ export const plugin = {
         }
         Vue.prototype.$clipboardCopy = function (data) {
             if (!setting.autoSaveCopy() || !data) return
-            document.querySelector(
-                '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
-            document.querySelector('#clipboard-text').value = data
-            document.querySelector('#clipboard-text').select()
-            if (document.execCommand('copy')) {
+            clipboard.copy(data,()=>{
                 this.$Message.success('结果已复制 ^o^')
-            }
-            document.querySelector('#clipboard').innerHTML = ''
+            })
+        }
+        Vue.prototype.$clipboardCopyImages = function (data) {
+            if (!setting.autoSaveCopy() || !data) return
+            clipboard.copyImage(data,()=>{
+                this.$Message.success('图片已复制 ^o^')
+            })
         }
     },
 }
 
-export default model
\ No newline at end of file
+export default model

src/views/tool/qrCode.vue

@@ -87,7 +87,7 @@
             generateHandle (str) {
                 generator.toDataURL(str, (error, url) => {
                     if (error) return this.$Message.error('二维码生成错误:' + error)
-                    this.$Message.success('生成成功')
+                    this.$clipboardCopyImages(url)
                     this.current.generateOutput = `<img style="width:300px" src="${url}" />`
                 })
             },
@@ -118,4 +118,4 @@
             }
         },
     }
-</script>
\ No newline at end of file
+</script>