tauri+vite3创建登录窗口|tauri自定义拖拽区域

上一篇有给大家分享Tauri创建多个窗口。这次分享tauri创建登录窗口切换至主窗口及自定义拖拽元素/最小化/最大化及关闭按钮。

tauri+vue3构建多窗口程序应用

tauri创建登录窗体

<!-- 登录模板 -->
<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="@assets/logo.png" />TAURI-VUE3-CAHT</h2>
                        <img class="bg" src="/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() {
    
    
                    // 跳转主窗口(会关闭登录窗口)
                    mainWin()
                }
            })
        }
    }
</script>

如上图：登录及主窗体构建函数。

当 label 中包含 main 字符，说明只能有一个主窗体，当登录成功后，登录窗体关闭，显示主窗口。

// 创建新窗口
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()
    }

    // 创建窗口对象
    let win = new WebviewWindow(args.label, args)
    // 是否最大化
    if(args.maximized && args.resizable) {
    
    
        win.maximize()
    }

    // 窗口创建完毕/失败
    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!')
    })
}

为了解决创建新窗口的时候，总会有一下左上角到居中闪动窗口。只需在配置参数中设置 visible: false 隐藏窗口，创建成功show显示窗口即可。

// 系统参数配置
export const windowConfig = {
    
    
    label: null,            // 窗口唯一label
    title: '',              // 窗口标题
    url: '',                // 路由地址url
    width: 900,             // 窗口宽度
    height: 640,            // 窗口高度
    minWidth: null,         // 窗口最小宽度
    minHeight: null,        // 窗口最小高度
    x: null,                // 窗口相对于屏幕左侧坐标
    y: null,                // 窗口相对于屏幕顶端坐标
    center: true,           // 窗口居中显示
    resizable: true,        // 是否支持缩放
    maximized: false,       // 最大化窗口
    decorations: false,     // 窗口是否无边框及导航条
    alwaysOnTop: false,     // 置顶窗口
    fileDropEnabled: false, // 禁止系统拖放
    visible: false,         // 隐藏窗口
}

tauri创建无边框拖拽窗体

当设置 decorations: false 属性，创建的窗口没有边框及导航。这时候就需要自定义拖拽及最小化/最大化及关闭按钮。

在需要拖动区域的元素上设置 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>

<!-- 右上角操作按钮 -->
<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 = 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) return
    await 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>

以上就是tauri+vite3创建登录窗口，自定义拖拽窗体的一些分享。