vue-electron 鼠标右键自定义菜单实现复制,粘贴,剪切!

1,049 阅读2分钟

引用: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()
    }
}

`