vue3+electron11自定义最小/大化/关闭按钮

在项目开发中，为了达到界面更加美观统一，常常需要自定义一些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技术开发自定义顶部导航条就分享到这里。