Package copy plugin

This commit is contained in:
Aicirou 2020-07-05 14:10:55 +08:00
parent eda64c8483
commit 29be793c48
4 changed files with 123 additions and 11 deletions

8
package-lock.json generated
View File

@ -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": { "vue-codemirror": {
"version": "4.0.6", "version": "4.0.6",
"resolved": "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz", "resolved": "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz",

View File

@ -13,6 +13,7 @@
"axios": "^0.19.2", "axios": "^0.19.2",
"bulma": "^0.8.2", "bulma": "^0.8.2",
"bulma-divider": "^0.2.0", "bulma-divider": "^0.2.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"element-ui": "^2.13.1", "element-ui": "^2.13.1",
"feb-alive": "^1.0.9", "feb-alive": "^1.0.9",
@ -30,7 +31,6 @@
"v-viewer": "^1.5.1", "v-viewer": "^1.5.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-axios": "^2.1.5", "vue-axios": "^2.1.5",
"vue-clipboard2": "^0.3.1",
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-i18n": "^8.17.3", "vue-i18n": "^8.17.3",
"vue-infinite-loading": "^2.4.5", "vue-infinite-loading": "^2.4.5",

View File

@ -10,7 +10,7 @@ import router from "./router";
import i18n from "./i18n"; import i18n from "./i18n";
// store // store
import store from "@/store/index"; import store from "@/store/index";
import VueClipboard from "vue-clipboard2"; import Clipboard from "@/plugin/clipboard";
import VueLazyload from "vue-lazyload"; import VueLazyload from "vue-lazyload";
import Viewer from "v-viewer"; import Viewer from "v-viewer";
import VuePlyr from "vue-plyr"; import VuePlyr from "vue-plyr";
@ -27,7 +27,7 @@ Vue.config.productionTip = false;
Vue.prototype.$cdnpath = cdnpath; Vue.prototype.$cdnpath = cdnpath;
Vue.use(Loading); Vue.use(Loading);
Vue.use(VueAxios, axios); Vue.use(VueAxios, axios);
Vue.use(VueClipboard); Vue.use(Clipboard);
Vue.use(VueLazyload, { Vue.use(VueLazyload, {
loading: cdnpath("images/airplane.gif"), loading: cdnpath("images/airplane.gif"),
}); });

View File

@ -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;