优化剪贴板功能 #86

Author: baiy

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

@@ -0,0 +1,36 @@
+import {isUtools} from '../helper'
+// 剪贴板操作
+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 = ()=>{
+    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 (isUtools && imageBase64){
+        window.utools.copyImage(imageBase64)
+        successCallback && successCallback()
+    }
+}
+
+export default {
+    copy,
+    paste,
+    copyImage
+}

src/tool/model.js

@@ -1,4 +1,5 @@
 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
+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>
+</script>