electron-vue 实现自定义拖拽、最小化、最大化、关闭、置顶功能

1. 使用 vue init simulatedgreg/electron-vue my-project 创建项目
   运行 npm run dev 报错
   
   解决办法:
   在项目的.electron-vue文件下的 webpack.renderer.config.js 和 webpack.web.config.js文件的 plugins里加

 templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },

加入之后重新运行：npm run dev 就ok了。

2.拖拽
在需要拖拽的元素加上:
css: -webkit-app-region: drag;
取消拖拽:
css: -webkit-app-region: no-drag;
3. Home.vue 的代码

<template>
  <div>

    <div class="top_nav">
      <button class="top_btn" :title="top_title" @click="onTopping"></button>
      <button class="min_btn" title="最小化" @click="onMinimize"></button>
      <button class="max_btn" :title="max_title" :style="{backgroundImage:'url('+ max_icon +')'}"
              @click="onMaximize"></button>
      <button class="close_btn" title="关闭" @click="onClose"></button>
    </div>

    你好
  </div>
</template>

<script>


export default {
  name: "Home",
  data() {
    return {
      top_title:"置顶",
      max_title: "最大化",
      max_icon: require("../assets/max.png"),
    }
  },
  mounted() {
    //监听窗口变化
    this.$electron.ipcRenderer.on('restoreMaximize', (event, data) => {
      switch (data) {
        case 'restore':
          this.max_title = "最大化";
          this.max_icon = require("../assets/max.png");
          break;
        case 'maximize':
          this.max_title = "向下还原";
          this.max_icon = require("../assets/reset_max.png");
          break;
      }
    });

    this.$electron.ipcRenderer.on('alwaysOnTop',(event,data)=>{
      switch (data) {
        case 'yes':
            this.top_title = "取消置顶";
          break;
          case 'no':
            this.top_title = "置顶";
            break;
      }
    })
  },
  methods: {
    //置顶功能
    onTopping() {
      this.$electron.ipcRenderer.send('window-top');
    },


    //最小化
    onMinimize() {
      this.$electron.ipcRenderer.send('window-min');
    },
    //最大化
    onMaximize() {
      this.$electron.ipcRenderer.send('window-max');
    },
    //关闭
    onClose() {
      this.$electron.ipcRenderer.send('window-close');
    }
  }
}
</script>

<style scoped lang="scss">
.top_nav {
  height: 32px;
  background: #fff;
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  button {
    border: none;
    background: none;
    -webkit-app-region: no-drag;
    outline: none;
  }

  button:focus {
    outline: none;
  }

  /*for IE*/
  button::-moz-focus-inner {
    border-color: transparent;
  }

  /*for mozilla*/
  button:focus {
    border: none;
  }

  .top_btn, .min_btn, .max_btn, .close_btn {
    width: 45px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
  }

  .top_btn:hover,
  .min_btn:hover,
  .max_btn:hover {
    cursor: pointer;
    background-color: #e5e5e5;
  }

  .close_btn:hover {
    background-image: url("../assets/hover_close.png");
    cursor: pointer;
    background-color: #f10707;
  }

  .top_btn {
    background-image: url("../assets/topping.png");
  }

  .min_btn {
    background-image: url("../assets/min.png");
  }

  .close_btn {
    background-image: url("../assets/close.png");
  }
}
</style>

4.ipcMain.js 的代码

const {ipcMain, BrowserWindow} = require('electron');

var mainWindow = BrowserWindow.getFocusedWindow();

//监听窗口变化  实现修改最大化和还原的图标
mainWindow.on('resize',()=>{
    if (!mainWindow.isMaximized()){
        BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','restore');
    }else {
        BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','maximize');
    }
})
//置顶
ipcMain.on('window-top', () => {
    if (mainWindow.isAlwaysOnTop()){
        mainWindow.setAlwaysOnTop(false);
        BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop','no');
    }else {
        mainWindow.setAlwaysOnTop(true);
        BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop','yes');
    }
});

//最小化
ipcMain.on('window-min', () => {
    mainWindow.minimize();
});

//最大化
ipcMain.on('window-max', () => {

    if (mainWindow.isMaximized()){
        mainWindow.restore();
        //主进程 个渲染进程 发送数据
        BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','restore');
    }else {
        mainWindow.maximize();
        //主进程 个渲染进程 发送数据
        BrowserWindow.getFocusedWindow().webContents.send('restoreMaximize','maximize');
    }

});
//关闭
ipcMain.on('window-close', () => {
    mainWindow.close();
});

最终效果:

码云仓库地址:https://gitee.com/huajiuZhao/electron-ment.git