本文中,苏南大叔将要描述的是electron如何创建上下文菜单,上下文菜单其实就是平时大家常说的右键菜单。但是,需要明确的是:这个上下文菜单其实鼠标左键也可以触发的。或者说:上下文菜单的触发,并不局限于右键。

苏南大叔:electron程序,如何创建自定义上下文菜单? - electron-context-menu
electron程序,如何创建自定义上下文菜单?(图5-1)

本文测试环境:mac/electron@5.0.2。基础龙套项目源码是electron-quick-start。上下文菜单的样式,是系统默认样式,并不能做深度定制。如果您有及其丰富的想法创意,建议您不要使用本文中所涉及的context-menu,而是选择用纯网页的技术,模拟一个菜单出来。

构建菜单

context menu是在主进程中创建的,而传统的网页模拟菜单技术,是在渲染进程里面创建的。官方demo的创建方式如下:

const {Menu,MenuItem} = require('electron')
const menu = new Menu()
menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true ,click:function(){console.log('click')}}))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'selectall',role:"selectall" }))
menu.append(new MenuItem({ label: 'copy',role:"copy" }))
请注意:使用buildFromTemplate()方式,也可以构建上下文菜单的,这并不冲突。

苏南大叔:electron程序,如何创建自定义上下文菜单? - main-menu-init
electron程序,如何创建自定义上下文菜单?(图5-2)

相关链接

electron创建系统顶部菜单的方法如下:

本文中,苏南大叔就再不案例更多参数了。支持的参数可以参见下面的链接:

结束语

更多electron相关经验文字,请点击苏南大叔的博客,并且强烈建议您加入浏览器收藏夹。地址如下:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: