electron-vue自定义菜单

延续之前承诺的定时喝水的小demo，使用electron-vue搭建的“定时闹钟1.0”版本已经上传到gitee了，有兴趣的同学们可以看看，现在只是1.0版本，很多地方都不完善，也有很多的功能比较粗糙，后续会写一个关于这个小demo的说明简单叙述一下。

ok，说回技术本身。首先是electron自定义菜单部分，我是把菜单单独抽出来做的组件，然后插入到页面中去的。

找到 项目 > src > main > index.js 中创建窗口的地方，添加 frame:false 属性去除electron自带的菜单。

vipWin = new BrowserWindow({
  width: 400,
  height: 550,
  parent: mainWindow, // win是主窗口
  frame:false,
  webPreferences: {
    nodeIntegration: true,
  },
});

创建MyMenu.vue文件，我这里菜单上的主要功能是：

1. 功能按钮：放大（全屏），缩小（收到任务栏），关闭，更多（其他操作）
2. 更多按钮点击出现列表：新增，调试，说明按钮

菜单代码:

<template>
    <div class="menu-wrapper">
        <div class="menu-title">计时闹钟</div>
        <div class="menu-operation">
            <div class="menu-oper" @click="otherMenu"><i class="fa fa-ellipsis-h"></i></div>
            <div class="menu-other-main" v-show="menOther">
                <div @click="addNewWindow">新增</div>
                <div>调试</div>
                <div @click="stateDialog" style="-webkit-app-region: no-drag;">说明</div>
            </div>
            <div class="menu-oper" @click="minWindow"><i class="fa fa-minus"></i></div>
            <div class="menu-oper" @click="maxWindow"><i :class="maxWindowIcon"></i></div>
            <div class="menu-oper" @click="closeWindow"><i class="fa fa-close"></i></div>
        </div>
    </div>
</template>

<script>
  import 'font-awesome/css/font-awesome.css';

  const { ipcRenderer: ipc } = window.require('electron');

  export default {
    name: 'MyMenu',
    data() {
      return {
        maxWindowIcon: {
          fa: true,
          'fa-arrows-alt': true,
          'fa-compress': false,
        },
        menOther: false,
      };
    },
    methods: {
      // 最小化窗体
      minWindow() {
        ipc.send('minWindow');
      },
      // 最大化窗体
      maxWindow() {
        // 切换图标
        if (this.maxWindowIcon['fa-arrows-alt']) {
          this.maxWindowIcon['fa-arrows-alt'] = false;
          this.maxWindowIcon['fa-compress'] = true;
        } else {
          this.maxWindowIcon['fa-arrows-alt'] = true;
          this.maxWindowIcon['fa-compress'] = false;
        }
        ipc.send('maxWindow');
      },
      // 关闭窗体
      closeWindow() {
        ipc.send('closeWindow');
      },
      // 其他
      otherMenu() {
        if (this.menOther) {
          this.menOther = false;
        } else {
          this.menOther = true;
        }
      },
      addNewWindow() {
        ipc.send('openAddNewWindow');
      },
      stateDialog() {
        ipc.send('openVip');
      },
    },
  };
</script>

<style scoped>
    .menu-wrapper {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        -webkit-app-region: drag;
        position: relative;
    }

    .menu-title {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        box-sizing: border-box;
        font-weight: bolder;
    }

    .menu-operation {
        float: right;
        height: 50px;
        line-height: 50px;
        position: relative;
    }

    .menu-oper {
        float: left;
        padding: 0 10px;
        cursor: pointer;
        -webkit-app-region: no-drag;
    }

    .menu-oper:hover {
        background-color: rgba(64, 158, 255, 0.11);
    }

    .menu-other-main {
        position: absolute;
        top: 50px;
        width: 80px;
        height: 150px;
        padding: 0 5px;
        box-sizing: border-box;
        border: 1px solid #eee;
        background-color: #fff;
        box-shadow: 0px 0px 30px #ddd;
        z-index: 10;
        -webkit-app-region: no-drag;
    }
</style>

注意: 在相应的点击按钮处必须添加css样式 -webkit-app-region: no-drag; 才可以点击
全屏按钮做点击更换图标方法。

当按钮点击时，触发vue中写的方法，借助ipcRenderer对象中的send方法，触发main > index.js文件中的方法。

ipc.on('minWindow', () => {
  mainWindow.minimize();
}); 

ipc.on('maxWindow', () => {
  if (mainWindow.isMaximized()) {
    mainWindow.restore();
  } else {
    mainWindow.maximize();
  }
});

ipc.on('closeWindow', () => {
  mainWindow.close();
});

窗口操作的功能按钮调用main文件夹下的index.js文件中的方法。