第一步：使用fs创建窗口配置文件
main.js
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//创建窗口配置文件SetWin.json
var fs = require('fs')
var obj = {
"data": {
"WinTheme": "warning",
"WinRadius": "mediumradius",
"isMaximized": "0",
"winsize": [
880,
780
],
"position": [
519,
166
]
}
}
obj = JSON.stringify(obj, null, 2);
//如果SetWin.json不存在则创建
var isexist = fs.existsSync("./SetWin.json")
if (isexist === false) {
fs.writeFileSync("./SetWin.json", obj);
}
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
/* eslint-disable no-new */
new Vue({
components: {
App
},
router,
store,
template: '<App/>'
}).$mount('#app')第二步：封装fs文件
assets/js/index.js
var fs = require("fs");
//新增文件
// funApi.AddJson(新增文件地址, "数组")
// 数组模板:
// var obj = {
// "data": {
// "text": ""
// }
// }
// obj = JSON.stringify(obj, null, 2);//转换数组格式
export function AddJson(path, json) {
if (path != "") {
if (json != "") {
var writ = fs.writeFileSync(path, json);
if (writ) {
return false;
} else {
return true;
}
}
}
}
//修改文件
// funApi.ChangeJson(需要修改内容的文件地址, "键", "值")
export function ChangeJson(path, name,newname) {
if (path != "") {
if (name != "") {
var page = fs.readFileSync(path + "/")
var person = page.toString();
person = JSON.parse(person);
var pagePerson = person.data; //限制只有data这个主键才能使用
if (name != "" && newname != "") {
pagePerson[name] = newname;
var str = JSON.stringify(person, null, 2);
var writ = fs.writeFileSync(path, str);
if (writ) {
return false;
} else {
return true;
}
}
}
}
}
//获取文件
// funApi.FieldJson(获取文件的地址)
export function FieldJson(path) {
if (path != "") {
var page = fs.readFileSync(path)
var person = page.toString();
person = JSON.parse(person);
return person;
}
}第三步：新建scss文件
assets/scss/_themes.scss
// 主题颜色
$v-primary: #3B4864;
$v-primary-hover: #262F43;
$v-warning: #ff9800;
$v-warning-hover: #ffa726;
$v-success: #009688;
$v-success-hover: #26a69a;
$v-error: #ff5722;
$v-error-hover: #ff7043;
$v-info: #607d8b;
$v-info-hover: #78909c;
//窗口圆角
$v-mediumradius:30px;
$v-smallradius:20px;
$v-miniradius:10px;
$v-nullradius:0px;
//关闭按钮圆角
$v-mediumradius-close:0 30px 0 0;
$v-smallradius-close:0 20px 0 0;
$v-miniradius-close:0 10px 0 0;
$v-nullradius-close:0 0 0 0;
//背景颜色
@mixin bg_color($color) {
background-color: $color;
[data-theme="primary"] & {
background-color: $v-primary;
}
[data-theme="warning"] & {
background-color: $v-warning;
}
[data-theme="success"] & {
background-color: $v-success;
}
[data-theme="error"] & {
background-color: $v-error;
}
[data-theme="info"] & {
background-color: $v-info;
}
}
//控制按钮接触颜色
@mixin hover_color($color) {
background-color: $color;
[data-theme="primary"] & {
background-color: $v-primary-hover;
}
[data-theme="warning"] & {
background-color: $v-warning-hover;
}
[data-theme="success"] & {
background-color: $v-success-hover;
}
[data-theme="error"] & {
background-color: $v-error-hover;
}
[data-theme="info"] & {
background-color: $v-info-hover;
}
}
//窗口圆角
@mixin win_radius($size) {
border-radius: $size;
[data-sizeradius="mediumradius"] & {
border-radius: $v-mediumradius;
}
[data-sizeradius="smallradius"] & {
border-radius: $v-smallradius;
}
[data-sizeradius="miniradius"] & {
border-radius: $v-miniradius;
}
[data-sizeradius="nullradius"] & {
border-radius: $v-nullradius;
}
}
//关闭按钮圆角
@mixin win_radius_close($size) {
border-radius: $size;
[data-sizeradius="mediumradius"] & {
border-radius: $v-mediumradius-close;
}
[data-sizeradius="smallradius"] & {
border-radius: $v-smallradius-close;
}
[data-sizeradius="miniradius"] & {
border-radius: $v-miniradius-close;
}
[data-sizeradius="nullradius"] & {
border-radius: $v-nullradius-close;
}
}第四步：主窗口代码index.vue
安装element，更换控制按钮图标
<template>
<div class="shadow">
<div :class="setwin">
<el-container>
<el-header height='44px' :class="setheader">
<div style="float: right;text-align: center;">
<div :class="setclose" @click="winclose">
<i class="el-icon-close" style="font-weight: 600;color:#FFFFFF;"></i>
</div>
<div class="maximizeWin" @click="maximizeWin">
<i :class="maxicon" style="font-weight: 600;color:#FFFFFF;"></i>
</div>
<div class="maximizeWin" @click="minimizeWin">
<i class="el-icon-minus" style="font-weight: 600;color:#FFFFFF;"></i>
</div>
<div class="maximizeWin" @click="SetWinDialog = true">
<i class="el-icon-s-tools" style="font-weight: 600;color:#FFFFFF;"></i>
</div>
</div>
</el-header>
<!-- header end -->
<el-main :class="setmain">
</el-main>
</el-container>
<!-- 新建书籍弹框 -->
<el-dialog title="窗口配置" :visible.sync="SetWinDialog" :modal="false" center :show-close="false"
:close-on-click-modal="false" width="540px">
<div style="padding: 25px;">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="窗口圆角">
<el-radio-group v-model="form.WinRadius" @input="SetWinRadius">
<el-radio-button label="mediumradius">大圆角</el-radio-button>
<el-radio-button label="smallradius">中圆角</el-radio-button>
<el-radio-button label="miniradius">小圆角</el-radio-button>
<el-radio-button label="nullradius">无</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="窗口主题">
<el-radio-group v-model="form.WinTheme" @input="SetTheme">
<el-radio-button label="primary">默认</el-radio-button>
<el-radio-button label="warning">橙黄</el-radio-button>
<el-radio-button label="success">青绿</el-radio-button>
<el-radio-button label="error">吉红</el-radio-button>
<el-radio-button label="info">玄灰</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="SetWinDialog = false">确定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import {
remote
} from 'electron';
import * as funApi from "@/assets/js/index.js";
export default {
data() {
return {
setwin: 'win', //动态窗口样式
setheader: 'header', //设置头部最大化后可否移动
maxicon: 'el-icon-full-screen', //设置最大化图标
setclose: 'closeWin', //设置关闭按钮样式
setmain:'main',
isMaximized: "", //窗口是否最大化
winsize: '', //窗口大小
position: '', //窗口位置
form: {
WinTheme: '', //主题名称
WinRadius: '' //窗口大小
},
SetWinDialog: false //窗口配置弹框
}
},
methods: {
minimizeWin() {
remote.getCurrentWindow().minimize(); // 窗口最小化
},
maximizeWin() {
//窗口最大化
var getWin = funApi.FieldJson("./SetWin.json")
if (this.isMaximized == "0") {
this.winsize = remote.getCurrentWindow().getSize() //获取当前窗口大小
this.position = remote.getCurrentWindow().getPosition() //获取当前窗口位置
remote.getCurrentWindow().maximize() //窗口最大化
this.setwin = 'maxwin' //更改窗口样式为最大化
this.setclose = 'closeWinmax' //更改关闭按钮样式
this.setheader = 'maxheader' //设置头部最大化后可否移动
this.maxicon = 'el-icon-copy-document' //设置最大化后图标
this.setmain = "maxmain"//设置main样式
funApi.ChangeJson("./SetWin.json", "winsize", this.winsize)
funApi.ChangeJson("./SetWin.json", "position", this.position)
funApi.ChangeJson("./SetWin.json", "isMaximized", "1")
this.isMaximized = "1" //为最大化
remote.getCurrentWindow().setResizable(false) //禁止拉伸窗口
} else { //恢复窗口最大化
remote.getCurrentWindow().setResizable(true) //启用拉伸窗口，前置条件，要排在第一位
remote.getCurrentWindow().setSize(getWin.data.winsize[0], getWin.data.winsize[
1]) //恢复之前窗口大小
remote.getCurrentWindow().setPosition(getWin.data.position[0], getWin.data.position[
1]) //恢复之前窗口位置
this.setclose = 'closeWin' //更改关闭按钮样式
this.setwin = 'win' //恢复透明圆角窗口
this.setheader = 'header' //设置头部最大化后可否移动
this.setmain = "main"//设置main样式
this.maxicon = 'el-icon-full-screen' //设置最大化后图标
this.isMaximized = "0" //正常窗口
funApi.ChangeJson("./SetWin.json", "isMaximized", "0")
}
},
winclose() {
setTimeout(() => {
undefined
remote.getCurrentWindow().close(); // 关闭窗口，也结束了所有进程
}, 10)
},
//主题进行切换
SetTheme() {
funApi.ChangeJson("./SetWin.json", "WinTheme", this.form.WinTheme)
document.documentElement.setAttribute('data-theme', this.form.WinTheme);
},
//窗口圆角切换
SetWinRadius() {
funApi.ChangeJson("./SetWin.json", "WinRadius", this.form.WinRadius)
document.documentElement.setAttribute('data-sizeradius', this.form.WinRadius);
}
},
created: function() {
var getWin = funApi.FieldJson("./SetWin.json")
// 延迟执行
setTimeout(() => {
undefined
//获取当前窗口配置
if (getWin.data.isMaximized == "1") {
//窗口最大化
remote.getCurrentWindow().maximize() //窗口最大化
this.setwin = 'maxwin' //更改窗口样式为最大化
this.setclose = 'closeWinmax' //更改关闭按钮样式
this.setheader = 'maxheader' //设置头部最大化后可否移动
this.maxicon = 'el-icon-copy-document' //设置最大化后图标
this.isMaximized = "1" //为最大化
remote.getCurrentWindow().setResizable(false) //禁止拉伸窗口
} else {
//恢复窗口最大化
remote.getCurrentWindow().setResizable(true) //启用拉伸窗口，前置条件，要排在第一位
remote.getCurrentWindow().setSize(getWin.data.winsize[0], getWin.data.winsize[
1]) //恢复之前窗口大小
remote.getCurrentWindow().setPosition(getWin.data.position[0], getWin.data.position[
1]) //恢复之前窗口位置
this.setclose = 'closeWin' //更改关闭按钮样式
this.setwin = 'win' //恢复透明圆角窗口
this.setheader = 'header' //设置头部最大化后可否移动
this.maxicon = 'el-icon-full-screen' //设置最大化后图标
this.isMaximized = "0" //正常窗口
}
//获取主题
this.form.WinTheme = getWin.data.WinTheme
document.documentElement.setAttribute('data-theme', getWin.data.WinTheme);
//获取窗口圆角
this.form.WinRadius = getWin.data.WinRadius
document.documentElement.setAttribute('data-sizeradius', getWin.data.WinRadius);
}, 10)
}
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/_themes.scss";
.shadow {
body {
background-color: rgba(0, 0, 0, 0); //将整体背景色设置为透明，依靠组件底色来设置底色
}
.win {
//正常窗口样式，圆角为20px
width: calc(100% - 10px); //去除左右间距各5px
height: calc(100vh - 10px); //去除上下间距各5px
@include bg_color($v-primary); //设置主题
@include win_radius($v-mediumradius); //设置圆角
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
margin: 5px; //将外间距设置为5px
}
.maxwin {
//窗口最大化后无圆边框
width: 100%;
height: 100vh;
@include bg_color($v-primary);
}
//header
.header {
height: 44px;
line-height: 44px;
padding: 0;
-webkit-app-region: drag; //可拖动窗口
border-radius: 20px 20px 0 0;
}
.maxheader {
height: 44px;
line-height: 44px;
padding: 0;
-webkit-app-region: no-drag; //不可拖动窗口，防止拖动窗口后执行窗口恢复，无法判断是否圆边框
@include bg_color($v-primary);
}
.closeWin {
//正常窗口，关闭按钮有圆角
float: right;
width: 40px;
height: 44px;
line-height: 44px;
font-weight: 600;
@include win_radius_close($v-mediumradius-close); //设置圆角
-webkit-app-region: no-drag; //可以操作按钮
cursor: pointer; //更改鼠标指针形状
}
.closeWin:hover {
//关闭按钮正常窗口选中
@include hover_color($v-primary);
}
.closeWinmax {
//最大化后关闭按钮无圆角
float: right;
width: 40px;
height: 44px;
line-height: 44px;
font-weight: 600;
-webkit-app-region: no-drag;
cursor: pointer;
}
.closeWinmax:hover {
//关闭按钮最大化后选中
@include hover_color($v-primary);
}
//最小化和最大化按钮样式
.maximizeWin {
float: right;
width: 40px;
height: 44px;
line-height: 44px;
font-weight: 600;
-webkit-app-region: no-drag;
cursor: pointer;
}
.maximizeWin:hover {
@include hover_color($v-primary);
}
//header-end
//main
.main {
height: calc(100vh - 54px);
// border-radius: 0 0 30px 30px;
padding: 0;
}
.maxmain {
height: calc(100vh - 44px);
padding: 0;
}
//main-end
//单选框
/deep/.el-form-item__label {
font-size: 16px;
}
//弹框窗口配置
/deep/ .el-dialog {
border-radius: 20px;
}
/deep/ .el-dialog__header {
border-bottom: 1px solid #E7EAEC;
border-radius: 20px 20px 0 0;
padding: 20px 20px 20px;
}
/deep/ .el-dialog__footer {
border-top: 1px solid #E7EAEC;
padding: 12px 20px 12px;
}
/deep/ .el-dialog--center .el-dialog__body {
padding: 0px;
}
.el-button{
border-radius: 10px;
width: 100px;
}
}
</style>
4606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
