基于vite3+tauri模擬QQ登錄切換窗體|Tauri自定義拖拽|最小/大/關(guān)閉 _生活百科

前兩天有給大家分享tauri+vue3快速搭建項目、封裝桌面端多開窗口。今天繼續(xù)來分享tauri創(chuàng)建啟動窗口、登錄窗口切換到主窗口及自定義拖拽區(qū)域的一些知識。希望對想要學習或正在學習的小伙伴有些幫助。

文章插圖

tauri+vue3登錄窗口切換主窗口

<template><div><div class="ntMain__cont flex1 flexbox flex-col"><div class="nt__lgregWrapper flex1 flexbox flex-col"><NavBar transparent /><div class="nt__lgregBox flex1"><div class="banner"><h2 class="tit flexbox flex-alignc"><img src="https://www.huyubaike.com/biancheng/@assets/logo.png" />TAURI-VUE3-CAHT</h2><img class="bg" src="https://www.huyubaike.com/static/skin/bg-banner.jpg" /></div><div class="forms"><form @submit.prevent="handleSubmit"><ul class="clearfix"><li><input class="iptxt flex1" type="text" v-model="formObj.tel" placeholder="請輸入手機號" /></li><li><input class="iptxt flex1" type="password" v-model="formObj.pwd" placeholder="請輸入密碼"/></li></ul><div class="btns"><el-button type="primary" native-type="submit" size="default" auto-insert-space>登錄</el-button></div><div class="lgregLink align-c clearfix"><router-link class="navigator" to="#">忘記密碼</router-link><router-link class="navigator" to="/register">注冊賬號</router-link></div></form></div></div></div></div></div></template><script setup>import { ref, reactive, inject } from 'vue'import { useStore } from 'vuex'import { mainWin } from '@/windows/actions'const store = useStore()const v3layer = inject('v3layer')const utils = inject('utils')const formObj = reactive({})const VMsg = (content) => {v3layer.message({ content, icon: 'error', shade: true })}const handleSubmit = () => {if(!formObj.tel){VMsg('手機號不能為空')}else if(!utils.checkTel(formObj.tel)){VMsg('手機號格式不正確')}else if(!formObj.pwd){VMsg('密碼不能為空')}else{// 一些邏輯處理...v3layer({type: 'toast',icon: 'success',content: '登錄成功',time: 2,onEnd() {// 跳轉(zhuǎn)主窗口(會關(guān)閉登錄窗口)mainWin()}})}}</script>windows/actions.js 定義登錄及主窗口函數(shù) 。

文章插圖
注意：當只需要一個主窗口，則需要在 label 標識中加入 main字符。
因為在創(chuàng)建窗口的時候，會檢測main字符是否存在，存在則只允許有一個主窗口。
// 創(chuàng)建新窗口async createWin(options) {const args = Object.assign({}, windowConfig, options)// 是否主窗口if(args.label.indexOf('main') > -1) {console.log('該窗口是主窗口')this.mainWin = getAll().find(w => w.label.indexOf('main') > -1 && w.label != args.label)await this.mainWin?.hide()}// 創(chuàng)建窗口對象let win = new WebviewWindow(args.label, args)// 是否最大化if(args.maximized && args.resizable) {win.maximize()}// 窗口創(chuàng)建完畢/失敗win.once('tauri://created', async() => {console.log('window create success!')await win?.show()await this.mainWin?.close()})win.once('tauri://error', async() => {console.log('window create error!')})}另外創(chuàng)建新窗口的時候，總會有一下左上角到居中閃動窗口。在配置參數(shù)中設(shè)置 visible: false 隱藏窗口，當窗口創(chuàng)建完畢，再show顯示窗口即可解決。
// 系統(tǒng)參數(shù)配置export const windowConfig = {label: null,// 窗口唯一labeltitle: '',// 窗口標題url: '',// 路由地址urlwidth: 900,// 窗口寬度height: 640,// 窗口高度minWidth: null,// 窗口最小寬度minHeight: null,// 窗口最小高度x: null,// 窗口相對于屏幕左側(cè)坐標y: null,// 窗口相對于屏幕頂端坐標center: true,// 窗口居中顯示resizable: true,// 是否支持縮放maximized: false,// 最大化窗口decorations: false,// 窗口是否無邊框及導航條alwaysOnTop: false,// 置頂窗口fileDropEnabled: false, // 禁止系統(tǒng)拖放visible: false,// 隱藏窗口}