vueelectron开发桌面应用程序（electronvite2vue3）

今天给小伙伴们分享 手把手撸后台系列一：使用electron vite.js创建后台之登录/注册模块。

登录、注册页整体分为左右两列布局，顶部导航栏采用镂空背景展示。

左侧背景使用了css3的 backdrop-filter 来实现毛玻璃效果。这里参考了苹果官网的导航背景虚化。

backdrop-filter属性可以使透过该层的底部元素模糊化。而元素本身内容却丝毫不受其影响。

新建登录模板login.vue

<template> <div> <div class="nt__lgregWrapper flex1 flexbox flex-col vui__drag"> <WinBar title=" " transparent> <template #wbtn> <Lang /> <a class="wbtn" title="扫码登录" @click="handleShowQR"><i class="iconfont icon-saoma"></i></a> <a class="wbtn" title="设置"><i class="iconfont icon-shezhi1"></i></a> </template> </WinBar> <template v-if="!isShowQrcode"> <div class="nt__lgregBox flex1 flexbox"> <div class="sidebox"> <div class="filter flexbox flex-col"> <div class="logo"><img src="/static/vlogo.png" /></div> <h2 class="subtit">ELECTRON-VUE3-VADMIN</h2> </div> </div> <div class="forms flex1 flexbox"> <form @submit.prevent="handleSubmit"> <ul class="clearfix"> <li class="flexbox flex-alignc"><input class="iptxt flex1" type="text" v-model="formObj.tel" :placeholder="t('views__auth-form_placeholder-tel')" autocomplete="off" maxLength="11" /><em class="borLine"></em></li> <li class="flexbox flex-alignc"><input class="iptxt flex1" type="password" v-model="formObj.pwd" :placeholder="t('views__auth-form_placeholder-pwd')" autocomplete="off" /><em class="borLine"></em></li> </ul> <div class="btns"><button class="vui__btn vui__btn-primary btn__submit" type="submit">{{t('views__auth-form_btn-login')}}</button></div> <div class="lgregLink align-c clearfix"> <router-link class="navigator" to="#">{{t('views__auth-form_link-forgetpwd')}}</router-link> <router-link class="navigator" to="/auth/register">{{t('views__auth-form_link-register')}}</router-link> </div> </form> </div> </div> </template> <template v-else> <div class="nt__lgregBox flex1 flexbox"> <div class="sidebox"> <div class="filter flexbox flex-col"> <div class="logo"><img src="/static/vlogo.png" /></div> <h2 class="subtit">ELECTRON-VUE3-VADMIN</h2> </div> </div> <div class="forms flex1 flexbox flex-col"> <div class="qrcode"><img src="/static/placeholder/wx-qrcode.jpg" /></div> <div style="text-align:center;">{{t('views__auth-form_saoma-tips')}}</div> <div class="btns"><button class="vui__btn vui__btn-primary btn__submit" @click="handleShowQR" style="width: 150px;">{{t('views__auth-form_saoma-back')}}</button></div> </div> </div> </template> </div> </div> </template>

顶部导航组件设置transparent属性，则可实现沉浸式透明背景。并且右上角图标按钮支持自定义配置。只需在具名插槽wbtn中新增标签即可。

<WinBar title=" " transparent> <template #wbtn> <Lang /> <a class="wbtn" title="扫码登录" @click="handleShowQR"><i class="iconfont icon-saoma"></i></a> <a class="wbtn" title="设置"><i class="iconfont icon-shezhi1"></i></a> ... </template> </WinBar>

<script> import { ref, reactive, inject } from 'vue' import { useStore } from 'vuex' import { useI18n } from 'vue-i18n' import { createWin } from '@/windows/actions' import Lang from '@/components/Lang' export default { components: { Lang }, setup() { const { t } = useI18n() const store = useStore() const v3layer = inject('v3layer') const utils = inject('utils') const isShowQrcode = ref(false) const formObj = reactive({}) const handleShowQR = () => { isShowQrcode.value = !isShowQrcode.value } const V3Msg = (content) => { v3layer.message({ content: content, icon: 'error', xclose: true, shade: true, }) } const handleSubmit = () => { if(!formObj.tel){ V3Msg(t('views__auth-form_tel-empty')) }else if(!utils.checkTel(formObj.tel)){ V3Msg(t('views__auth-form_tel-error')) }else if(!formObj.pwd){ V3Msg(t('views__auth-form_pwd-empty')) }else{ store.commit('SET_ISLOGIN', true); store.commit('SET_TOKEN', utils.secretKey()); store.commit('SET_USER', formObj.tel); v3layer.popover({ content: t('views__auth-form_login-success'), icon: 'success', shade: true, time: 2, onEnd: () => { createWin({isMainWin: true}) } }) } } return { t, isShowQrcode, handleShowQR, formObj, handleSubmit, } } } </script>

在vue2.x中使用vue-i118n国际化，只需调用this.$t('xxx')，而在vue3.x项目中则是使用useI18n实现，注意需把 t 给return出去。

在locale目录下的views文件夹里即可配置语言。

注册页面和登录页面功能基本一样，只是多了一个60s倒计时验证码。

// 60s倒计时 const handleVcode = () => { if(!formObj.tel) { V3Msg(t('views__auth-form_tel-empty')) }else if(!utils.checkTel(formObj.tel)) { V3Msg(t('views__auth-form_tel-error')) }else { data.time = 60 data.disabled = true countDown() } } const countDown = () => { if(data.time > 0) { data.vcodeText = `${t('views__auth-form_getcode')}(${data.time})` data.time-- setTimeout(countDown, 1000) }else{ data.vcodeText = t('views__auth-form_getcode') data.time = 0 data.disabled = false } }

好了，使用electron vite.js开发后台之登录/注册模块就分享到这里。