feat(store): ✨ 新增登录弹框状态管理
This commit is contained in:
parent
763fbc5c02
commit
16b59d6ab2
@ -2,9 +2,12 @@
|
||||
import { ref, watch } from 'vue';
|
||||
import logoPng from '@/assets/images/logo.png';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import { useUserStore } from '@/store';
|
||||
import AccountPassword from './components/FormLogin/AccountPassword.vue';
|
||||
import QrCodeLogin from './components/QrCodeLogin/index.vue';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 使用 defineModel 定义双向绑定的 visible(需 Vue 3.4+)
|
||||
const visible = defineModel<boolean>('visible');
|
||||
const showMask = ref(false); // 控制遮罩层显示的独立状态
|
||||
@ -31,7 +34,8 @@ function toggleLoginMode() {
|
||||
|
||||
// 点击遮罩层关闭对话框(触发过渡动画)
|
||||
function handleMaskClick() {
|
||||
visible.value = false; // 触发离开动画
|
||||
// 触发离开动画
|
||||
userStore.closeLoginDialog();
|
||||
}
|
||||
|
||||
// 过渡动画结束回调
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
<!-- LoginBtn 登录按钮 -->
|
||||
<script setup lang="ts">
|
||||
import LoginDialog from '@/components/LoginDialog/index.vue';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
const isLoginDialogVisible = ref(false);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const isLoginDialogVisible = computed(() => userStore.isLoginDialogVisible);
|
||||
|
||||
// 点击登录按钮时调用Store方法打开弹框
|
||||
function handleClickLogin() {
|
||||
console.log('handleClickLogin');
|
||||
isLoginDialogVisible.value = true;
|
||||
userStore.openLoginDialog();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -25,8 +25,21 @@ export const useUserStore = defineStore(
|
||||
const logout = async () => {
|
||||
// 如果需要调用接口,可以在这里调用
|
||||
clearToken();
|
||||
router.replace({ name: 'login' });
|
||||
clearUserInfo();
|
||||
router.replace({ name: 'chat' });
|
||||
};
|
||||
|
||||
// 新增:登录弹框状态
|
||||
const isLoginDialogVisible = ref(false);
|
||||
|
||||
// 新增:打开弹框方法
|
||||
const openLoginDialog = () => {
|
||||
isLoginDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 新增:关闭弹框方法(可根据需求扩展)
|
||||
const closeLoginDialog = () => {
|
||||
isLoginDialogVisible.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
@ -37,6 +50,10 @@ export const useUserStore = defineStore(
|
||||
setUserInfo,
|
||||
clearUserInfo,
|
||||
logout,
|
||||
// 新增:暴露弹框状态和方法
|
||||
isLoginDialogVisible,
|
||||
openLoginDialog,
|
||||
closeLoginDialog,
|
||||
};
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user