⚡ 优化复制指令

src/directive/index.js

@@ -3,7 +3,6 @@ import hasPermi from './permission/hasPermi'
 import clipboard from './module/clipboard'
 import drag from './module/drag'
 import waves from './module/waves'
-// import copyText from './module/copyText'
 
 export default function directive(app) {
   app.directive('hasRole', hasRole)
@@ -11,5 +10,4 @@ export default function directive(app) {
   app.directive('clipboard', clipboard)
   app.directive('drag', drag)
   app.directive('waves', waves)
-  // app.directive('copyText', copyText)
+}
-}

src/directive/module/clipboard.js

@@ -1,77 +1,67 @@
-/**
+import useClipboard from 'vue-clipboard3'
- * v-clipboard 文字复制剪贴
+const { toClipboard } = useClipboard()
- *
- 作者： CodePlayer
- 链接： https: //juejin.cn/post/7052968352007847972
- 来源： 稀土掘金
- 著作权归作者所有。 商业转载请联系作者获得授权， 非商业转载请注明出处。
- */
-
-// import Clipboard from 'clipboard'
-import useClipboard from "vue-clipboard3";
-const { toClipboard } = useClipboard();
 export default {
   // 挂载
   mounted(el, binding) {
     // binding.arg 为动态指令参数
     // 由于 指令是支持响应式的 因此我们指令需要有一个“全局”对象，这里我们为了不借助其他对象浪费资源，就直接使用el自身了
     // 将copy的值 成功回调 失败回调 及 click事件都绑定到el上 这样在更新和卸载时方便操作
-    switch (binding.arg) {
+    const { value, arg } = binding
-    case "copy":
+    switch (arg) {
-      // copy值
+      case 'copy':
-      el.clipValue = binding.value;
+        // copy值
-      // click事件
+        el.clipValue = value
-      el.clipCopy = function () {
+        // click事件
-        toClipboard(el.clipValue)
+        el.clipCopy = function () {
-          .then(result => {
+          toClipboard(el.clipValue)
-            el.clipSuccess && el.clipSuccess(result);
+            .then((result) => {
-          })
+              el.clipSuccess && el.clipSuccess(result)
-          .catch(err => {
+            })
-            el.clipError && el.clipError(err);
+            .catch((err) => {
-          });
+              el.clipError && el.clipError(err)
-      };
+            })
-      // 绑定click事件
+        }
-      el.addEventListener("click", el.clipCopy);
+        // 绑定click事件
-      break;
+        el.addEventListener('click', el.clipCopy)
-    case "success":
+        break
-      // 成功回调
+      case 'success':
-      el.clipSuccess = binding.value;
+        // 成功回调
-      break;
+        el.clipSuccess = binding.value
-    case "error":
+        break
-      // 失败回调
+      case 'error':
-      el.clipError = binding.value;
+        // 失败回调
-      break;
+        el.clipError = binding.value
+        break
     }
   },
   // 相应修改 这里比较简单 重置相应的值即可
   updated(el, binding) {
     switch (binding.arg) {
-    case "copy":
+      case 'copy':
-      el.clipValue = binding.value;
+        el.clipValue = binding.value
-      break;
+        break
-    case "success":
+      case 'success':
-      el.clipSuccess = binding.value;
+        el.clipSuccess = binding.value
-      break;
+        break
-    case "error":
+      case 'error':
-      el.clipError = binding.value;
+        el.clipError = binding.value
-      break;
+        break
     }
   },
   // 卸载 删除click事件 删除对应的自定义属性
   unmounted(el, binding) {
     switch (binding.arg) {
-    case "copy":
+      case 'copy':
-      el.removeEventListener("click", el.clipCopy);
+        el.removeEventListener('click', el.clipCopy)
-      delete el.clipValue;
+        delete el.clipValue
-      delete el.clipCopy;
+        delete el.clipCopy
-      break;
+        break
-    case "success":
+      case 'success':
-      delete el.clipSuccess;
+        delete el.clipSuccess
-      break;
+        break
-    case "error":
+      case 'error':
-      delete el.clipError;
+        delete el.clipError
-      break;
+        break
     }
-  },
+  }
-
+}
-}

src/directive/module/copyText.js

@@ -1,66 +0,0 @@
-/**
-* v-copyText 复制文本内容
-* Copyright (c) 2022 ruoyi
-*/
-
-export default {
-  beforeMount(el, { value, arg }) {
-    if (arg === "callback") {
-      el.$copyCallback = value;
-    } else {
-      el.$copyValue = value;
-      const handler = () => {
-        copyTextToClipboard(el.$copyValue);
-        if (el.$copyCallback) {
-          el.$copyCallback(el.$copyValue);
-        }
-      };
-      el.addEventListener("click", handler);
-      el.$destroyCopy = () => el.removeEventListener("click", handler);
-    }
-  }
-}
-
-function copyTextToClipboard(input, { target = document.body } = {}) {
-  const element = document.createElement('textarea');
-  const previouslyFocusedElement = document.activeElement;
-
-  element.value = input;
-
-  // Prevent keyboard from showing on mobile
-  element.setAttribute('readonly', '');
-
-  element.style.contain = 'strict';
-  element.style.position = 'absolute';
-  element.style.left = '-9999px';
-  element.style.fontSize = '12pt'; // Prevent zooming on iOS
-
-  const selection = document.getSelection();
-  const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);
-
-  target.append(element);
-  element.select();
-
-  // Explicit selection workaround for iOS
-  element.selectionStart = 0;
-  element.selectionEnd = input.length;
-
-  let isSuccess = false;
-  try {
-    isSuccess = document.execCommand('copy');
-  } catch { }
-
-  element.remove();
-
-  if (originalRange) {
-    selection.removeAllRanges();
-    selection.addRange(originalRange);
-  }
-
-  // Get the focus back on the previously focused element, if any
-  if (previouslyFocusedElement) {
-    previouslyFocusedElement.focus();
-  }
-
-  return isSuccess;
-}