diff --git a/src/main.js b/src/main.js index 694041b..27f6d1d 100755 --- a/src/main.js +++ b/src/main.js @@ -14,11 +14,19 @@ import LoadingService from './services/loading' import { directive as clickaway } from 'vue-clickaway'; import GuipMessage from '@/components/GuipMessage/index'; import HeaderIcon from './utils/headerIcon' +// 复制到粘贴板 +import clipboard from '@/utils/dirClipBoard'; +import { modernCopyToClipboard } from '@/utils/clipboard'; +// 复制 +Vue.prototype.$copy = modernCopyToClipboard; Vue.prototype.$loadingFn = LoadingService; Vue.config.productionTip = false; +// 请求 Vue.prototype.$http = request; Vue.use(ElementUI); Vue.use(GuipMessage) +Vue.use(clipboard); + Vue.directive('clickaway', clickaway); Vue.mixin(HeaderIcon) new Vue({ @@ -27,9 +35,3 @@ new Vue({ render: h => h(App) }).$mount('#app') -// function q(e) { -// for (var t = 1; t < arguments.length; t++) { -// var r = null != arguments[t] ? arguments[t] : {}; -// t % 2 ? F(Object(r), !0).forEach((function (t) { T(e, t, r[t]) })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : F(Object(r)).forEach((function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)) })) } return e } - - diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js new file mode 100644 index 0000000..4bbc503 --- /dev/null +++ b/src/utils/clipboard.js @@ -0,0 +1,80 @@ +/** + * 复制文本到剪贴板 + * @param {string} text 要复制的文本 + * @param {Object} options 配置选项 + * @param {string} options.successMsg 成功提示信息 + * @param {string} options.errorMsg 失败提示信息 + * @param {Vue} options.vm Vue实例(用于调用$message) + * @returns {Promise} 是否复制成功 + */ +export function copyToClipboard(text, options = {}) { + const { + successMsg = '复制成功', + errorMsg = '复制失败，请手动复制', + vm = null + } = options; + + return new Promise((resolve) => { + // 创建textarea元素 + const textarea = document.createElement('textarea'); + textarea.value = text; + textarea.style.position = 'fixed'; // 防止页面滚动 + document.body.appendChild(textarea); + textarea.select(); + + try { + // 执行复制命令 + const successful = document.execCommand('copy'); + if (successful) { + if (vm && vm.$Message) { + vm.$Message.success(successMsg); + } else { + console.log(successMsg); + } + resolve(true); + } else { + throw new Error('Copy command was unsuccessful'); + } + } catch (err) { + console.error('复制失败:', err); + if (vm && vm.$Message) { + vm.$Message.error(errorMsg); + } else { + console.error(errorMsg); + } + resolve(false); + } finally { + document.body.removeChild(textarea); + } + }); + } + + /** + * @param {string} text 要复制的文本 + * @param {Object} options 配置选项 + * @returns {Promise} 是否复制成功 + */ + export async function modernCopyToClipboard(text, options = {}) { + const { + successMsg = '复制成功', + errorMsg = '复制失败，请手动复制', + vm = null + } = options; + + try { + // 使用现代剪贴板API + await navigator.clipboard.writeText(text); + if (vm && vm.$Message) { + vm.$Message.success(successMsg); + } else { + console.log(successMsg); + } + return true; + } catch (err) { + console.error(errorMsg, err); + // 现代API失败后回退到传统方法 + return copyToClipboard(text, options); + } + } + + export default modernCopyToClipboard; \ No newline at end of file diff --git a/src/utils/dirClipBoard.js b/src/utils/dirClipBoard.js new file mode 100644 index 0000000..a90d9e6 --- /dev/null +++ b/src/utils/dirClipBoard.js @@ -0,0 +1,19 @@ +import modernCopyToClipboard from '@/utils/clipboard'; + +export default { + install(Vue) { + Vue.directive('clipboard', { + bind(el, binding) { + el.style.cursor = 'pointer'; + el.addEventListener('click', async () => { + const text = binding.value || el.innerText; + const options = { + vm: binding.instance, + ...(binding.arg || {}) + }; + await modernCopyToClipboard(text, options); + }); + } + }); + } +}; \ No newline at end of file diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue index b1f92bf..083487b 100644 --- a/src/views/elementGroups.vue +++ b/src/views/elementGroups.vue @@ -1,49 +1,67 @@