82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<div class="tui-authorize-form">
|
|
<t-tabs class="tab" v-model="tabValue">
|
|
<t-tab-panel :value="Tab.LOGIN" label="登录" />
|
|
<t-tab-panel :value="Tab.REGISTER" label="注册" />
|
|
</t-tabs>
|
|
<div class="content">
|
|
<login
|
|
v-if="tabValue == Tab.LOGIN"
|
|
:captcha="props.captcha"
|
|
:login="props.login"
|
|
@login-success="onLoginSuccess"
|
|
/>
|
|
<register
|
|
v-if="tabValue == Tab.REGISTER"
|
|
:captcha="props.captcha"
|
|
:register="props.register"
|
|
@register-success="onRegisterSuccess"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Login from "./login.vue";
|
|
import Register from "./register.vue";
|
|
import { Emits, useHandler } from "~/components/authorize-form/emits";
|
|
import type { CaptchaRequest, LoginHandler, RegisterHandler } from "./types";
|
|
import { ref } from "vue";
|
|
|
|
defineOptions({
|
|
name: "AuthorizeForm"
|
|
});
|
|
|
|
enum Tab {
|
|
LOGIN = "LOGIN",
|
|
REGISTER = "REGISTER"
|
|
}
|
|
|
|
const emits = defineEmits<Emits>();
|
|
const { onLoginSuccess, onRegisterSuccess } = useHandler(emits);
|
|
|
|
const props = withDefaults(defineProps<{
|
|
captcha?: CaptchaRequest;
|
|
login?: LoginHandler;
|
|
register?: RegisterHandler;
|
|
}>(), {});
|
|
|
|
const tabValue = ref(Tab.LOGIN);
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tui-authorize-form {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.tab {
|
|
width: 16rem;
|
|
background: transparent;
|
|
margin-bottom: 1rem;
|
|
|
|
:deep(.t-tabs__nav-wrap) {
|
|
width: 100%;
|
|
|
|
.t-tabs__nav-item {
|
|
width: 50%;
|
|
|
|
.t-tabs__nav-item-wrapper {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 20rem;
|
|
}
|
|
}
|
|
</style>
|