electron-vue自定义窗口

electron-vue自定义窗口

1.主进程中添加 frame: false

  mainWindow = new BrowserWindow({
    height: 563,
    minHeight:400,
    minWidth:500,
    useContentSize: true,
    width: 1000,
    show:false,
    frame: false,//隐藏标题栏颜色
    icon:path.join(__static,'./imgs/icon.ico')
  })

2.创建Headr.vue

<template>
    <div class="header">
        <img class="logo" src="~@/assets/imgs/icon.png" alt="">
        <div class="right">
            <span class="icon iconfont icon-zuixiaohua3" title="最小化" @click="minimizeWin"></span>
            <span class="icon iconfont icon-zuidahua1" title="最大化"  @click="maximizeWin"></span>
            <span class="icon iconfont icon-guanbi" title="关闭" @click="closeWin"></span>
        </div>

    </div>
</template>

<script>
    import { remote } from 'electron';
    export default {
        name: "Header",
        methods: {
            minimizeWin(){
                remote.getCurrentWindow().minimize(); // 窗口最小化
            },
            maximizeWin(){
                const win=remote.getCurrentWindow();
                if(win.isMaximized()){ // 判断 窗口是否已最大化
                    win.restore();// 恢复原窗口大小
                }else{
                    win.maximize();  //最大化窗口
                }
            },
            closeWin(){
                // ipcRenderer.send('close');
                remote.getCurrentWindow().close(); // 关闭窗口，也结束了所有进程
            }
        }
    }
</script>

<style scoped>
    .right{
        float: right;
        -webkit-app-region: no-drag //自定义元素上添加此样式否自无法操作

    }
    .right .icon{
        display: inline-block;
        line-height: 30px;
        height: 30px;
        width: 30px;
        text-align: center;
        cursor: pointer;
        color: #d3dae3;
    }
    .right .icon:hover{
        color: #ffffff;
        background-color: #b4b6ba;
    }
    .right .icon-guanbi:hover{
        background-color: #b10202;
    }
.header{
    height:30px;
    background-color: #6c6b6b;
    -webkit-app-region: drag;//添加此样式
}
    .logo{
        width: 30px;
    }
</style>

注意事项

（1）给header页面的根元素添加 -webkit-app-region: drag; 样式
（2）给需要操作的元素添加 -webkit-app-region: no-drag; 样式

3.app.vue中引入Header.vue

<template>
  <div id="app">
    <v-Header></v-Header>
    <router-view></router-view>
  </div>
</template>

<script>
  import Header from './components/Header'
  export default {
    name: 'dome3',
    components:{
      "v-Header":Header
    }
  }
</script>