在项目开发中，为了达到界面更加美观统一，常常需要自定义一些UI。
今天就给大家分享一些vue3和electron无边框窗体如何实现自定义最小化/最大化/关闭按钮。
在layouts目录新建winbar.vue和navbar.vue两个页面。分别是右上角按钮和导航栏模板。
1、winbar.vue模板
<template>
<div class="vui__winbtn flexbox flex-alignc">
<div class="vui__winbtn-groups" :style="{'color': color}">
<slot />
<a v-if="minimizable" class="wbtn" title="最小化" @click="handleWinMin"><i class="iconfont icon-min"></i></a>
<a v-if="maximizable" class="wbtn" :title="hasMaximized ? '向下还原' : '最大化'" @click="handleWinMax2Min"><i class="iconfont" :class="hasMaximized ? 'icon-restore' : 'icon-max'"></i></a>
<a v-if="closable" class="wbtn close" title="关闭" @click="handleWinclose"><i class="iconfont icon-quit"></i></a>
</div>
</div>
</template>
<script>
import { remote } from 'electron'
import { onMounted, reactive, inject, toRefs } from 'vue'
import { useStore } from 'vuex'
import { winCfg, setWin } from '@module/actions'
export default {
props: {
color: { type: String, default: '#fff' },
// 窗口是否可以最小化
minimizable: { type: [Boolean, String], default: true },
// 窗口是否可以最大化
maximizable: { type: [Boolean, String], default: true },
// 窗口是否可以关闭
closable: { type: [Boolean, String], default: true },
},
setup() {
let win = remote.getCurrentWindow()
const store = useStore()
const v3layer = inject('v3layer')
const data = reactive({
hasMaximized: false
})
onMounted(() => {
if(win.isMaximized()) {
data.hasMaximized = true
}
win.on('maximize', () => {
data.hasMaximized = true
})
win.on('unmaximize', () => {
data.hasMaximized = false
})
})
// 最小化
const handleWinMin = () => {
setWin('min', winCfg.window.id)
}
// 最大化/还原
const handleWinMax2Min = () => {
setWin('max2min', winCfg.window.id)
}
// 关闭
const handleWinClose = () => {
if(winCfg.window.isMainWin) {
let $el = v3layer({
type: 'android',
content: '是否最小化至托盘，不退出程序？',
btns: [
{
text: '残忍退出',
style: 'color:#ff5438',
click: () => {
$el.close()
store.commit('LOGOUT')
setWin('close')
}
},
{
text: '最小化至托盘',
style: 'color:#00d2ff',
click: () => {
$el.close()
setTimeout(() => {
win.hide()
}, 300)
}
}
]
})
}else {
setWin('close', winCfg.window.id)
}
}
return {
...toRefs(data),
winCfg,
handleWinMin,
handleWinMax2Min,
handleWinClose
}
}
}
</script>
支持自定义颜色、是否最小/大化或关闭。
<WinBar color="#f90">
<a class="wbtn" title="关于" @click="handleAboutWin"><i class="iconfont icon-about"></i></a>
<a class="wbtn" title="个性装扮" @click="handleSkinWin"><i class="iconfont icon-huanfu"></i></a>
<a class="wbtn" title="朋友圈" @click="handleFZoneWin"><i class="iconfont icon-pyq2"></i><em class="vui__badge-dot"></em></a>
<a class="wbtn" title="设置" @click="isShowSettingLayer=true"><i class="iconfont icon-peizhi"></i></a>
<a class="wbtn" title="界面管理器" @click="handleUIManager"><i class="iconfont icon-tianjia"></i></a>
<a class="wbtn" :class="{'on': isAlwaysOnTop}" :title="isAlwaysOnTop ? '取消置顶' : '置顶'" @click="handleAlwaysTop"><i class="iconfont icon-ding"></i></a>
</WinBar>
2、navbar.vue模板
<template>
<div class="nt__navbar" :class="{'fixed': fixed, 'transparent fixed': transparent}">
<div class="nt__navbar-wrap flexbox flex-alignc vui__drag" :style="{'background': bgcolor, 'color': color, 'z-index': zIndex}">
<!-- //标题 -->
<div class="nt__navbar-title" :class="{'center': center}">
<template v-if="$slots.title"><slot name="title" /></template>
<template v-else>{{title || winCfg.window.title}}</template>
</div>
</div>
<WinBar :minimizable="minimizable" :maximizable="maximizable" :closable="closable">
<slot name="wbtn" />
</WinBar>
</div>
</template>
<script>
import { winCfg } from '@module/actions'
export default {
props: {
// 标题
title: { type: String, default: '' },
// 标题颜色
color: { type: String, default: '#fff' },
// 背景颜色
bgcolor: String,
// 标题是否居中
center: { type: [Boolean, String], default: false },
// 是否固定
fixed: { type: [Boolean, String], default: false },
// 背景透明
transparent: { type: [Boolean, String], default: false },
// 设置层级
zIndex: { type: [Number, String], default: '2021' },
/**
* 控制WinBar参数
*/
// 窗口是否可以最小化
minimizable: { type: [Boolean, String], default: true },
// 窗口是否可以最大化
maximizable: { type: [Boolean, String], default: true },
// 窗口是否可以关闭
closable: { type: [Boolean, String], default: true },
},
setup() {
return {
winCfg,
}
}
}
</script>
支持自定义标题、颜色、背景色、标题居中、是否固定导航栏、透明背景等功能。
<NavBar bgcolor="#f90" minimizable="false">
<template #title><i class="iconfont icon-about"></i> 关于</template>
</NavBar>
<NavBar bgcolor="#20232a" center>
<template #title><i class="iconfont icon-huanfu"></i> 个性装扮</template>
<template #wbtn>
<a class="wbtn" title="我的装扮"><i class="iconfont icon-tabbar3"></i></a>
</template>
</NavBar>
如果设置了bgcolor属性，则会覆盖个性皮肤设置。
<NavBar :bgcolor="headerBg" transparent>
<template #title><i class="iconfont icon-pyq"></i> 朋友圈</template>
<template #wbtn>
<a class="wbtn" title="更换封面"><i class="iconfont icon-dianzan"></i></a>
<a class="wbtn" title="发布" @click="isShowPublish=true"><i class="iconfont icon-paizhao"></i></a>
</template>
</NavBar>
如果设置了transparent属性，则导航栏会悬浮在内容层之上，达到沉浸式导航条效果。
好了，基于vue3.x electron技术开发自定义顶部导航条就分享到这里。
,
