⚡Package copy plugin

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",

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",

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"),
 });

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;