From 29be793c48e969e9a626c8dc28e3bb7b83f77b6b Mon Sep 17 00:00:00 2001 From: Aicirou <2643053021@qq.com> Date: Sun, 5 Jul 2020 14:10:55 +0800 Subject: [PATCH] :zap:Package copy plugin --- package-lock.json | 8 --- package.json | 2 +- src/main.js | 4 +- src/plugin/clipboard/index.js | 120 ++++++++++++++++++++++++++++++++++ 4 files changed, 123 insertions(+), 11 deletions(-) create mode 100644 src/plugin/clipboard/index.js diff --git a/package-lock.json b/package-lock.json index e8e67f8..0643954 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12388,14 +12388,6 @@ } } }, - "vue-clipboard2": { - "version": "0.3.1", - "resolved": "https://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.3.1.tgz", - "integrity": "sha1-blUft704SImyiw2jsSKJ7WvKSJQ=", - "requires": { - "clipboard": "^2.0.0" - } - }, "vue-codemirror": { "version": "4.0.6", "resolved": "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz", diff --git a/package.json b/package.json index 73b4f47..2b3bddd 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "axios": "^0.19.2", "bulma": "^0.8.2", "bulma-divider": "^0.2.0", + "clipboard": "^2.0.6", "core-js": "^3.6.4", "element-ui": "^2.13.1", "feb-alive": "^1.0.9", @@ -30,7 +31,6 @@ "v-viewer": "^1.5.1", "vue": "^2.6.11", "vue-axios": "^2.1.5", - "vue-clipboard2": "^0.3.1", "vue-codemirror": "^4.0.6", "vue-i18n": "^8.17.3", "vue-infinite-loading": "^2.4.5", diff --git a/src/main.js b/src/main.js index b1d091b..921ac22 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,7 @@ import router from "./router"; import i18n from "./i18n"; // store import store from "@/store/index"; -import VueClipboard from "vue-clipboard2"; +import Clipboard from "@/plugin/clipboard"; import VueLazyload from "vue-lazyload"; import Viewer from "v-viewer"; import VuePlyr from "vue-plyr"; @@ -27,7 +27,7 @@ Vue.config.productionTip = false; Vue.prototype.$cdnpath = cdnpath; Vue.use(Loading); Vue.use(VueAxios, axios); -Vue.use(VueClipboard); +Vue.use(Clipboard); Vue.use(VueLazyload, { loading: cdnpath("images/airplane.gif"), }); diff --git a/src/plugin/clipboard/index.js b/src/plugin/clipboard/index.js new file mode 100644 index 0000000..cbac0a5 --- /dev/null +++ b/src/plugin/clipboard/index.js @@ -0,0 +1,120 @@ +/* eslint-disable no-unused-vars */ +/** + * reference vue-clipboard2 + * https://github.com/Inndy/vue-clipboard2 + */ +import Clipboard from "clipboard"; +import notify from "@/components/notification"; + +var VueClipboardConfig = { + autoSetContainer: false, + appendToBody: true, // This fixes IE, see #50 +}; + +const copy = (text, container) => { + return new Promise(function(resolve, reject) { + var fakeElement = document.createElement("button"); + var clipboard = new Clipboard(fakeElement, { + text: function() { + return text; + }, + action: function() { + return "copy"; + }, + container: typeof container === "object" ? container : document.body, + }); + clipboard.on("success", function(e) { + clipboard.destroy(); + resolve(e); + }); + clipboard.on("error", function(e) { + clipboard.destroy(); + reject(e); + }); + if (VueClipboardConfig.appendToBody) document.body.appendChild(fakeElement); + fakeElement.click(); + if (VueClipboardConfig.appendToBody) document.body.removeChild(fakeElement); + }); +}; + +var VueClipboard = { + copy: copy, + copyText: (text, container) => { + return copy(text, container) + .then(() => { + notify({ + title: "notify.title", + message: "copy.success", + type: "success", + }); + }) + .catch(() => { + notify({ + title: "notify.title", + message: "copy.error", + type: "error", + }); + }); + }, + install: function(Vue) { + Vue.prototype.$clipboardConfig = VueClipboardConfig; + Vue.prototype.$copy = copy; + Vue.prototype.$copyText = this.copyText; + + Vue.directive("clipboard", { + bind: function(el, binding, vnode) { + if (binding.arg === "success") { + el._vClipboard_success = binding.value; + } else if (binding.arg === "error") { + el._vClipboard_error = binding.value; + } else { + var clipboard = new Clipboard(el, { + text: function() { + return binding.value; + }, + action: function() { + return binding.arg === "cut" ? "cut" : "copy"; + }, + container: VueClipboardConfig.autoSetContainer ? el : undefined, + }); + clipboard.on("success", function(e) { + var callback = el._vClipboard_success; + callback && callback(e); + }); + clipboard.on("error", function(e) { + var callback = el._vClipboard_error; + callback && callback(e); + }); + el._vClipboard = clipboard; + } + }, + update: function(el, binding) { + if (binding.arg === "success") { + el._vClipboard_success = binding.value; + } else if (binding.arg === "error") { + el._vClipboard_error = binding.value; + } else { + el._vClipboard.text = function() { + return binding.value; + }; + el._vClipboard.action = function() { + return binding.arg === "cut" ? "cut" : "copy"; + }; + } + }, + unbind: function(el, binding) { + if (binding.arg === "success") { + delete el._vClipboard_success; + } else if (binding.arg === "error") { + delete el._vClipboard_error; + } else { + el._vClipboard.destroy(); + delete el._vClipboard; + } + }, + }); + }, + config: VueClipboardConfig, +}; + +export default VueClipboard;