Electron-vue第六章：圆角窗口和控制按钮

第一步：设置透明窗口

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>

最终效果

 图标使用的是阿里图标，也可以随心随意更改