From 44041620a10bea7d1591c5b29f234f2637b29531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com> Date: Thu, 13 Jul 2023 13:00:58 +0800 Subject: [PATCH] =?UTF-8?q?:zap:=20=E4=BC=98=E5=8C=96=E5=A4=8D=E5=88=B6?= =?UTF-8?q?=E6=8C=87=E4=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directive/index.js | 4 +- src/directive/module/clipboard.js | 110 ++++++++++++++---------------- src/directive/module/copyText.js | 66 ------------------ 3 files changed, 51 insertions(+), 129 deletions(-) delete mode 100644 src/directive/module/copyText.js diff --git a/src/directive/index.js b/src/directive/index.js index 7564339..3d2dd6f 100644 --- a/src/directive/index.js +++ b/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) -} \ No newline at end of file +} diff --git a/src/directive/module/clipboard.js b/src/directive/module/clipboard.js index e186c55..408a783 100644 --- a/src/directive/module/clipboard.js +++ b/src/directive/module/clipboard.js @@ -1,77 +1,67 @@ -/** - * v-clipboard 文字复制剪贴 - * - 作者： CodePlayer - 链接： https: //juejin.cn/post/7052968352007847972 - 来源： 稀土掘金 - 著作权归作者所有。 商业转载请联系作者获得授权， 非商业转载请注明出处。 - */ - -// import Clipboard from 'clipboard' -import useClipboard from "vue-clipboard3"; -const { toClipboard } = useClipboard(); +import useClipboard from 'vue-clipboard3' +const { toClipboard } = useClipboard() export default { // 挂载 mounted(el, binding) { // binding.arg 为动态指令参数 // 由于 指令是支持响应式的 因此我们指令需要有一个“全局”对象，这里我们为了不借助其他对象浪费资源，就直接使用el自身了 // 将copy的值 成功回调 失败回调 及 click事件都绑定到el上 这样在更新和卸载时方便操作 - switch (binding.arg) { - case "copy": - // copy值 - el.clipValue = binding.value; - // click事件 - el.clipCopy = function () { - toClipboard(el.clipValue) - .then(result => { - el.clipSuccess && el.clipSuccess(result); - }) - .catch(err => { - el.clipError && el.clipError(err); - }); - }; - // 绑定click事件 - el.addEventListener("click", el.clipCopy); - break; - case "success": - // 成功回调 - el.clipSuccess = binding.value; - break; - case "error": - // 失败回调 - el.clipError = binding.value; - break; + const { value, arg } = binding + switch (arg) { + case 'copy': + // copy值 + el.clipValue = value + // click事件 + el.clipCopy = function () { + toClipboard(el.clipValue) + .then((result) => { + el.clipSuccess && el.clipSuccess(result) + }) + .catch((err) => { + el.clipError && el.clipError(err) + }) + } + // 绑定click事件 + el.addEventListener('click', el.clipCopy) + break + case 'success': + // 成功回调 + el.clipSuccess = binding.value + break + case 'error': + // 失败回调 + el.clipError = binding.value + break } }, // 相应修改 这里比较简单 重置相应的值即可 updated(el, binding) { switch (binding.arg) { - case "copy": - el.clipValue = binding.value; - break; - case "success": - el.clipSuccess = binding.value; - break; - case "error": - el.clipError = binding.value; - break; + case 'copy': + el.clipValue = binding.value + break + case 'success': + el.clipSuccess = binding.value + break + case 'error': + el.clipError = binding.value + break } }, // 卸载 删除click事件 删除对应的自定义属性 unmounted(el, binding) { switch (binding.arg) { - case "copy": - el.removeEventListener("click", el.clipCopy); - delete el.clipValue; - delete el.clipCopy; - break; - case "success": - delete el.clipSuccess; - break; - case "error": - delete el.clipError; - break; + case 'copy': + el.removeEventListener('click', el.clipCopy) + delete el.clipValue + delete el.clipCopy + break + case 'success': + delete el.clipSuccess + break + case 'error': + delete el.clipError + break } - }, - -} \ No newline at end of file + } +} diff --git a/src/directive/module/copyText.js b/src/directive/module/copyText.js deleted file mode 100644 index 7063df8..0000000 --- a/src/directive/module/copyText.js +++ /dev/null @@ -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; -}