electron使用右键菜单

2025-10-29 11:22:45 阅读:8 编辑
<template>
  <div>
    <webview id="webview" ref="webview" allowpopups src="https://www.baidu.com" webpreferences="contextIsolation=false, nativeWindowOpen=true, nodeIntegration=true, enableRemoteModule=true"></webview>
  </div>
</template>
<script>
import {ipcApiRoute} from '@/api/main'
import myMixins from './../../mixins'
//import {Menu, MenuItem} from "electron";

// 初始化Electron模块

export default {
  mixins: [myMixins],
  data() {
    return {
      url: '',
      is_register_devtoolReceiveMsg:true,
    };
  },
  mounted: function () {
   // this.url = 'https://baidu.com';
    const webview = document.getElementById('webview');
    webview.addEventListener('console-message', e => {
      console.log(e.message);
      //this.receiveFrontMessage(e.message);
    });

    webview.addEventListener('dom-ready', () => {
      console.log('页面加载完成,dom-ready');

    });
    let that = this;
    // webview监听右键事件
    webview.addEventListener("context-menu", function(pageInfo) {
      console.log("context-menu",pageInfo);
      // 发送对应的type通知主进程做对应的操作
      let param = {
          event_params:pageInfo.params
      };
      that.$ipcInvoke(ipcApiRoute.btCreateMenu, param).then(mainMenu => {
      })
    })

  },
  methods: {

  }
};
</script>
<style scoped>
#webview {
  width: 100vw;
  height: 100vh;
}
</style>