copyText.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import Vue from "vue";
  2. import message from 'ant-design-vue/es/message';
  3. // 注册一个全局自定义复制指令 `v-copyText`
  4. Vue.directive("copyText", {
  5. bind(el, { value }) {
  6. el.$value = value;
  7. el.handler = () => {
  8. el.style.position = 'relative';
  9. if (!el.$value) {
  10. // 值为空的时候,给出提示
  11. message.info('无复制内容');
  12. return
  13. }
  14. // 动态创建 textarea 标签
  15. const textarea = document.createElement('textarea');
  16. // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
  17. textarea.readOnly = 'readonly';
  18. textarea.style.position = 'absolute';
  19. textarea.style.top = '0px';
  20. textarea.style.left = '-9999px';
  21. textarea.style.zIndex = '-9999';
  22. // 将要 copy 的值赋给 textarea 标签的 value 属性
  23. textarea.value = el.$value
  24. // 将 textarea 插入到 el 中
  25. el.appendChild(textarea);
  26. // 兼容IOS 没有 select() 方法
  27. if (textarea.createTextRange) {
  28. textarea.select(); // 选中值并复制
  29. } else {
  30. textarea.setSelectionRange(0, el.$value.length);
  31. textarea.focus();
  32. }
  33. const result = document.execCommand('Copy');
  34. if (result) message.info('复制成功');
  35. el.removeChild(textarea);
  36. }
  37. el.addEventListener('click', el.handler); // 绑定点击事件
  38. },
  39. // 当传进来的值更新的时候触发
  40. componentUpdated(el, { value }) {
  41. el.$value = value;
  42. },
  43. // 指令与元素解绑的时候,移除事件绑定
  44. unbind(el) {
  45. el.removeEventListener('click', el.handler);
  46. },
  47. });