第一步:设置透明窗口
1.先将窗口改为透明状态且无边框和菜单
main/index.js
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 750,
useContentSize: true,
width: 900,
transparent: true,//透明窗口
minHeight: 700,//最小窗口高度
minWidth: 700,//最小窗口宽度
backgroundColor: '#00000000',//窗口底色为透明色
frame: false,//是否无边框
resizable: true//是否可以拖拉窗口边框改变大小
})
mainWindow.loadURL(winURL)
mainWindow.setMenu(null)//禁用菜单
mainWindow.setMaximizable(false) // 禁止双击最大化
2.通讯页和路由
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Index
},
{
path: '*',
redirect: '/'
}
]
})
第二步:修改index.vue样式,使其达到心中的预期
<template>
<div class="shadow">
<div :class="setwin">
<span>***.测试页面</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
setwin: 'win', //动态窗口样式
}
},
}
</script>
<style lang="scss" scoped>
.shadow {
body {
background-color: rgba(0, 0, 0, 0); //将整体背景色设置为透明,依靠组件底色来设置底色
}
.win {
//正常窗口样式,圆角为20px
width: calc(100% - 10px); //去除左右间距各5px
height: calc(100vh - 10px); //去除上下间距各5px
background-color: #FFFFFF; //设置底色为白色
border-radius: 20px; //圆角20px
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
margin: 5px; //将外间距设置为5px
}
.maxwin {//窗口最大化后无圆边框
width: 100%;
height: 100vh;
background-color: #FFFFFF;
}
}
</style>
运行效果
出现滚动条,在app.vue中修改滚动条样式,同时禁用文本选中和body的默认间距
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'radiuswin'
}
</script>
<style>
/* CSS */
* {
color: #303133;
font-family: "Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
html {
/* 禁用html的滚动条,由于用的无框架窗口,默认就会有一个滚动条,因此去掉 */
overflow-y: hidden;
}
body {
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
第三步:设置头部控制按钮
<template>
<div class="shadow">
<div :class="setwin">
<!-- header -->
<div :class="setheader">
<div style="float: right;text-align: center;">
<div :class="setclose" @click="winclose">
<span class="iconfont el-icon-allclose"></span>
</div>
<div class="maximizeWin" @click="maximizeWin">
<span class="iconfont el-icon-allsquare"></span>
</div>
<div class="maximizeWin" @click="minimizeWin">
<span class="iconfont el-icon-allmove"></span>
</div>
<div class="maximizeWin">
<span class="iconfont el-icon-allgengduo"></span>
</div>
</div>
</div>
<!-- header end -->
<span>***.测试页面</span>
</div>
</div>
</template>
<script>
import {
remote
} from 'electron';
export default {
data() {
return {
setwin: 'win', //动态窗口样式
setheader: 'header', //设置头部最大化后可否移动
setclose: 'closeWin', //设置关闭按钮样式
isMaximized: 0, //判断是否最大化
}
},
methods: {
minimizeWin() {
remote.getCurrentWindow().minimize(); // 窗口最小化
},
maximizeWin() { //窗口最大化
if (this.isMaximized == 0) {
this.wins = remote.getCurrentWindow().getSize() //获取当前窗口大小
this.position = remote.getCurrentWindow().getPosition() //获取当前窗口位置
remote.getCurrentWindow().maximize() //窗口最大化
this.setwin = 'maxwin' //更改窗口样式为最大化
this.setclose = 'closeWinmax' //更改关闭按钮样式
this.setheader = 'maxheader' //设置头部最大化后可否移动
this.isMaximized = 1 //为最大化
remote.getCurrentWindow().setResizable(false) //禁止拉伸窗口
} else { //恢复窗口最大化
remote.getCurrentWindow().setResizable(true) //启用拉伸窗口,前置条件,要排在第一位
remote.getCurrentWindow().setSize(this.wins[0], this.wins[1]) //恢复之前窗口大小
remote.getCurrentWindow().setPosition(this.position[0], this.position[1]) //恢复之前窗口位置
this.setclose = 'closeWin' //更改关闭按钮样式
this.setwin = 'win' //恢复透明圆角窗口
this.setheader = 'header' //设置头部最大化后可否移动
this.isMaximized = 0 //正常窗口
}
},
winclose() {
remote.getCurrentWindow().close(); // 关闭窗口,13版本close不知道什么原因失效
},
}
}
</script>
<style lang="scss" scoped>
.shadow {
body {
background-color: rgba(0, 0, 0, 0); //将整体背景色设置为透明,依靠组件底色来设置底色
}
.win {
//正常窗口样式,圆角为20px
width: calc(100% - 10px); //去除左右间距各5px
height: calc(100vh - 10px); //去除上下间距各5px
background-color: #FFFFFF; //设置底色为白色
border-radius: 20px; //圆角20px
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
margin: 5px; //将外间距设置为5px
}
.maxwin {
//窗口最大化后无圆边框
width: 100%;
height: 100vh;
background-color: #FFFFFF;
}
//header
.header {
border-bottom: 1px solid #DCDFE6;
height: 48px;
line-height: 48px;
-webkit-app-region: drag;//可拖动窗口
}
.maxheader {
border-bottom: 1px solid #DCDFE6;
height: 48px;
line-height: 48px;
-webkit-app-region: no-drag;//不可拖动窗口,防止拖动窗口后执行窗口恢复,无法判断是否圆边框
}
.closeWin {//正常窗口,关闭按钮有圆角
float: right;
width: 40px;
height: 48px;
line-height: 48px;
font-weight: 600;
border-radius: 0 20px 0 0;
-webkit-app-region: no-drag;//可以操作按钮
cursor: pointer;//更改鼠标指针形状
}
.closeWin:hover {//关闭按钮正常窗口选中
background-color: #F2F6FC;
}
.closeWinmax {//最大化后关闭按钮无圆角
float: right;
width: 40px;
height: 48px;
line-height: 48px;
font-weight: 600;
-webkit-app-region: no-drag;
cursor: pointer;
}
.closeWinmax:hover {//关闭按钮最大化后选中
background-color: #F2F6FC;
}
//最小化和最大化按钮样式
.maximizeWin {
float: right;
width: 40px;
height: 48px;
line-height: 48px;
font-weight: 600;
-webkit-app-region: no-drag;
cursor: pointer;
}
.maximizeWin:hover {
background-color: #F2F6FC;
}
//header-end
}
</style>
最终效果
图标使用的是阿里图标,也可以随心随意更改