基于vite3+tauri模拟QQ登录切换窗体|Tauri自定义拖拽|最小/大/关闭( 二 ) _生活百科

文章插图
tauri 提供了 data-tauri-drag-region 属性，用来自定义元素拖动功能。
<template><div class="nt__navbar" :class="{'fixed': fixed || transparent}"><div data-tauri-drag-region class="nt__navbar-wrap flexbox flex-alignc"><div class="nt__navbar-title" :class="{'center': center}"><template v-if="$slots.title"><slot name="title" /></template><template v-else>{{title}}</template></div></div><WinTool :minimizable="minimizable" :maximizable="maximizable" :closable="closable"><slot name="wbtn" /></WinTool></div></template>

文章插图

文章插图
新建一个 winTool.vue 组件，自定义右上角按钮操作。
<template><div class="taui__winbtn"><div class="taui__winbtn-groups"><slot /><a v-if="minimizable" class="wbtn" title="最小化" @click="handleWinMin"><i class="iconfont icon-min"></i></a><a v-if="maximizable && isResizable" class="wbtn" :title="isMaximized ? "向下还原' : '最大化'" @click="handleWinMax2Min"><i class="iconfont" :class="isMaximized ? '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 setup>import { onMounted, reactive, inject, toRefs } from 'vue'import { useStore } from 'vuex'import { appWindow } from '@tauri-apps/api/window'import { listen } from '@tauri-apps/api/event'import { exit } from '@tauri-apps/api/process'// ...const store = useStore()const v3layer = inject('v3layer')const data = https://www.huyubaike.com/biancheng/reactive({isMaximized: false,isResizable: true})onMounted(async() => {data.isMaximized = await appWindow.isMaximized()data.isResizable = await appWindow.isResizable()listen('tauri://resize', async() => {data.isMaximized = await appWindow.isMaximized()})})// 最小化const handleWinMin = async() => {await appWindow.minimize()}// 最大化/还原const handleWinMax2Min = async() => {const resizable = await appWindow.isResizable()if(!resizable) returnawait appWindow.toggleMaximize()}// 关闭const handleWinClose = async() => {if(appWindow.label.indexOf('main') > -1) {let $el = v3layer({type: 'android',content: '确认退出应用程序吗？',btns: [{text: '最小化托盘',style: 'color:#24c8db',click: () => {await appWindow.hide()}},{text: '退出程序',style: 'color:#ff5438',click: async() => {store.commit('LOGOUT')await exit()}}]})}else {await appWindow.close()}}</script>如下图：导航条支持自定义背景/透明背景，自定义插槽按钮等功能。

文章插图
<NavBar transparent><template #title><i class="iconfont icon-pyq2"></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-choose"></i></a></template></NavBar>Okr ，以上就是tauri创建登录窗口切换、自定义拖拽窗口的一些小分享。
https://www.cnblogs.com/xiaoyan2017/p/16812092.html