Electron 采坑记录

记录下electron开发中遇到的一些坑...

1. UI组件中的tooltip失效

描述

在element-ui中使用tooltip失效。

解决方案

webpack.renderer.config.js中将element-ui加入白名单:

/**
 * List of node_modules to include in webpack bundle
 *
 * Required for specific packages like Vue UI libraries
 * that provide pure *.vue files that need compiling
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
 */
let whiteListedModules = ['vue', 'element-ui']

扩展

不只是element-ui,尝试了其他ui组件也是这个问题,猜测应该是tooltip影响到了鼠标事件,这些事件本身被electorn所过滤,需要加进白名单才能起作用。

2. 打包后mac下无法复制黏贴

描述

复制黏贴失效都是因为菜单栏消失引起的,默认下打包后的应用没有生成菜单,导致mac下部分功能失效。

解决方案

在main进程创建窗口的时候添加菜单:

// Create the Application's main menu
  const template = [{
    label: "Application",
    submenu: [
      { label: "About Application", selector: "orderFrontStandardAboutPanel:" },
      { type: "separator" },
      { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }}
    ]}, {
    label: "Edit",
    submenu: [
      { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
      { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
      { type: "separator" },
      { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
      { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
      { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
      { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }
    ]}
  ];

  Menu.setApplicationMenu(Menu.buildFromTemplate(template));