copytext.js 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import Clipboard from "clipboard";
  2. import Vue from "vue";
  3. export default {
  4. bind: (el, binding = {}, vnode) => {
  5. const clipboard = new Clipboard(el, {
  6. text: () => binding.value
  7. });
  8. const Message = Vue.prototype.$Message;
  9. clipboard.on("success", e => {
  10. Message.success(e.text + " 已复制到剪切板");
  11. });
  12. clipboard.on("error", e => {
  13. Message.error("复制失败");
  14. });
  15. if (el) {
  16. el.__clipboard__ = clipboard;
  17. el.style.cursor = "pointer";
  18. el.title = el.title || "点击复制";
  19. el.onmouseover = () => {
  20. el.style.color = "#4395FF";
  21. };
  22. el.onmouseout = () => {
  23. el.style.color = "";
  24. };
  25. }
  26. },
  27. update: (el, binding, vnode) => {
  28. el.__clipboard__.text = () => binding.value;
  29. },
  30. unbind: (el, binding) => {
  31. if (!el) return;
  32. el.__clipboard__ && el.__clipboard__.destroy();
  33. delete el.__clipboard__;
  34. }
  35. };
  36. //directive/index.js
  37. import copytext from "./copytext";
  38. const importDirective = Vue => {
  39. Vue.directive("copytext", copytext);
  40. };
  41. export default importDirective;