引用:https://juejin.cn/post/7040999136069419021
上面比较详细,不过我这边粘贴的时候 发现有点BUG,粘贴的时候 会把原本文本框内内容给清除掉!下面是修改及完善过后的代码,以及剪切~
getContextMenu() {
// 监听contextmenu,实现自定义右键菜单
window.addEventListener('contextmenu', function (e) {
e.preventDefault()
//new一个菜单
let menu = new Menu()
//添加菜单功能, label: 菜单名称, accelerator:快捷键,click:点击方法
menu.append(new MenuItem({label: '复制', role: 'copy', accelerator: 'CommandOrControl+C', click: copyText}))
//添加菜单分割线
menu.append(new MenuItem({type: 'separator'}))
//添加菜单功能
menu.append(new MenuItem({label: '粘贴', accelerator: 'CommandOrControl+V', click: printText}))
//添加菜单分割线
menu.append(new MenuItem({type: 'separator'}))
//添加菜单功能
menu.append(new MenuItem({label: '剪切', role: 'cut', accelerator: 'CommandOrControl+X', click: cutText}))
//添加弹窗
menu.popup(remoter.getCurrentWindow())
}, false);
// 复制方法
function copyText() {
const str = getSelection() // 获取选中内容
console.log("xxxxxxxxxxxx", str);
if (str == undefined) {
clipboard.writeText('') // 写入剪贴板
} else {
clipboard.writeText(str) // 写入剪贴板
}
}
// 粘贴方法
function printText() {
if (document.activeElement) {
const str = clipboard.readText() // 获取剪贴板内容
let sel = window.window.getSelection().toString(); // 获取剪贴板内容
let ev = new Event('input', {bubbles: true});
ev.simulated = true;
// 下面是判断粘贴的时候是否有选中,有选中就在粘贴的时候把选中文字给清除
if(sel){
document.execCommand('delete')
}document.activeElement.value);document.activeElement.value);
document.activeElement.value = document.activeElement.value + str; // 写入焦点元素
document.activeElement.dispatchEvent(ev);
// clipboard.clear() // 清空剪贴板
}
}
// 剪切方法
function cutText(e) {
console.log(e);
}
// 获取选中内容
function getSelection() {
let text = '';
if (window.getSelection) {
text = window.getSelection().toString()
} else if (document.selection && document.selection.type !== 'Control') {
text = document.selection.createRange().text
}
if (text) {
return text
}
}
},
实战补充: 不在组件内使用并且销毁会影响其它页面! `
created() {
this.$nextTick(() => {
this.getContextMenu();
})
},
destroyed() {
this.getContextMenu();
},
粘贴优化:未优化之前,粘贴后焦点会移动到字段最后面,优化后会把焦点放在粘贴字段的后面 `
// 粘贴方法
function printText() {
if (document.activeElement) {
// 获取剪贴板内容
const str = clipboard.readText()
// 获取选中内容
let sel = window.window.getSelection().toString();
//防止文本框粘贴内容为undefined
let ev = new Event('input', {bubbles: true});
ev.simulated = true;
let activeElement = document.activeElement;
if(sel){
document.execCommand('delete')
}
let insertStr = (val,start, newStr) => {
return val.slice(0, start) + newStr + val.slice(start)
}
let setFocus = str.length + activeElement.selectionStart;
// 写入焦点元素
activeElement.value = insertStr(activeElement.value,activeElement.selectionStart,str)
activeElement.dispatchEvent(ev);
// 设置焦点在粘贴内容后
activeElement.setSelectionRange(setFocus,setFocus);
// 清空剪贴板
// clipboard.clear()
}
}
`