electron菜单操作

阅读：评论：0

electron菜单操作

渣渣程序猿的一卷到底之路——electron之menu菜单操作

menu 类可以用来创建原生菜单，它可用作应用菜单和 context 菜单。该模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用

应用菜单
context 菜单(点击鼠标卷出来的菜单)

应用菜单

先来个menu.js

const { Menu } = require("electron");
let menuList = [{label: "首页",submenu: [{label: "返回首页",},],},{label: "我的",},{label: "编辑",submenu: [{ label: "撤销" }, { label: "恢复" }],},
];
const menu = Menu.buildFromTemplate(menuList);
Menu.setApplicationMenu(menu);

注:Menu.buildFromTemplate()(构建模板)和Menu.setApplicationMenu()(设置应用菜单)固定写法，直接套就好

background.js(main.js)在ready函数里引入

  require("./menu.js");

如果使用Menu.setApplicationMenu(null)隐藏了菜单，那么即使设置了它也不会出来滴

上下文菜单

鼠标左键

<span @click="showMenu">点击</span>
<span>粘贴的内容:{{ printFont }}</span>

const { ref } = require("vue");
const { Menu, MenuItem, getCurrentWindow, clipboard } =require("electron").remote;
var menu = new Menu();
// 定义粘贴版内容变量
const printFont = ref();
// 监听鼠标右键
window.addEventListener("contextmenu", (e) => {e.preventDefault();clickMouseRight();
});
const clickMouseRight = () => {if (!Selection().isCollapsed) {menu.append(new MenuItem({label: "复制",accelerator: "CommandOrControl+C",click: copyString,}));menu.append(new MenuItem({label: "粘贴",accelerator: "CommandOrControl+V",click: printString,}));menu.popup(getCurrentWindow());}
};
// 复制操作
const copyString = () => {console.log("copy");//getSelection(); // 获取选中内容clipboard.writeText(getSelection());
};
// 粘贴操作
const printString = () => {console.log("printString");if (document.activeElement) {// adText() // 获取剪贴板内容printFont.value = adText(); // 写入焦点元素clipboard.clear(); // 清空剪贴板}
};
// 获取选中内容
const getSelection = () => {var text = "";if (Selection) {// 除IE9以下 之外的浏览器text = Selection().toString();} else if (document.selection && pe !== "Control") {//IE9以下，可不考虑text = ateRange().text;}if (text) {return text;}
};

鼠标右键

<div class="menu"><span>我要被粘贴</span><span>粘贴的内容:{{ printFont }}</span>
</div>

const { ref } = require("vue");
const { Menu, clipboard } = require("electron").remote;
// 定义粘贴版内容变量
const printFont = ref();
const rightTemplate = ref([{label: "粘贴",accelerator: "ctrl+V",click: () => {if (document.activeElement) {printFont.value = adText(); // 写入焦点元素clipboard.clear(); // 清空剪贴板}},},{label: "复制",accelerator: "ctrl+C",click: () => {clipboard.writeText(getSelection());},},
]);
// 监听鼠标右键
window.addEventListener("contextmenu", (e) => {e.preventDefault();clickMouseRight();
});
const clickMouseRight = () => {if (!Selection().isCollapsed) {// 建立菜单模版const rightMenu = Menu.buildFromTemplate(rightTemplate.value);//把菜单模板添加到右键菜单rightMenu.popup();}
};
// 获取选中内容
const getSelection = () => {var text = "";if (Selection) {// 除IE9以下 之外的浏览器text = Selection().toString();} else if (document.selection && pe !== "Control") {//IE9以下，可不考虑text = ateRange().text;}if (text) {return text;}
};