diff --git a/mayfly_go_web/package.json b/mayfly_go_web/package.json index 784e9157..5b1a9e03 100644 --- a/mayfly_go_web/package.json +++ b/mayfly_go_web/package.json @@ -12,6 +12,7 @@ "@element-plus/icons-vue": "^2.1.0", "asciinema-player": "^3.6.2", "axios": "^1.6.2", + "clipboard": "^2.0.11", "countup.js": "^2.7.0", "cropperjs": "^1.5.11", "echarts": "^5.4.3", diff --git a/mayfly_go_web/src/common/utils/string.ts b/mayfly_go_web/src/common/utils/string.ts index 49e97af4..1f593b40 100644 --- a/mayfly_go_web/src/common/utils/string.ts +++ b/mayfly_go_web/src/common/utils/string.ts @@ -1,4 +1,6 @@ import { v1 as uuidv1 } from 'uuid'; +import Clipboard from 'clipboard'; +import { ElMessage } from 'element-plus'; /** * 模板字符串解析,如:template = 'hahaha{name}_{id}' ,param = {name: 'hh', id: 1} @@ -139,3 +141,41 @@ export function getContentWidth(content: any): number { export function randomUuid() { return uuidv1(); } + +/** + * 拷贝文本至剪贴板 + * @param txt 需要拷贝到剪贴板的文本 + * @param selector click事件对应的元素selector,默认为 #copyValue + * @returns + */ +export async function copyToClipboard(txt: string, selector: string = '#copyValue') { + // navigator clipboard 需要https等安全上下文 + if (navigator.clipboard && window.isSecureContext) { + // navigator clipboard 向剪贴板写文本 + try { + // 拷贝单元格数据 + await navigator.clipboard.writeText(txt); + ElMessage.success('复制成功'); + } catch (e: any) { + ElMessage.error('复制失败'); + } + return; + } + + let clipboard = new Clipboard(selector, { + text: function () { + return txt; + }, + }); + clipboard.on('success', () => { + ElMessage.success('复制成功'); + // 释放内存 + clipboard.destroy(); + }); + clipboard.on('error', () => { + // 不支持复制 + ElMessage.error('该浏览器不支持自动复制'); + // 释放内存 + clipboard.destroy(); + }); +} diff --git a/mayfly_go_web/src/components/contextmenu/index.vue b/mayfly_go_web/src/components/contextmenu/index.vue index 52aea8d2..acda639e 100644 --- a/mayfly_go_web/src/components/contextmenu/index.vue +++ b/mayfly_go_web/src/components/contextmenu/index.vue @@ -12,6 +12,7 @@