120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<docs>
|
||
---
|
||
order: 11
|
||
title:
|
||
zh-CN: 登录框
|
||
en-US: Login Form
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
普通的登录框，可以容纳更多的元素。
|
||
|
||
## en-US
|
||
|
||
Normal login form which can contain more elements.
|
||
|
||
</docs>
|
||
<template>
|
||
<a-form
|
||
:model="formState"
|
||
name="normal_login"
|
||
class="login-form"
|
||
@finish="onFinish"
|
||
@finishFailed="onFinishFailed"
|
||
>
|
||
<a-form-item
|
||
label="Username"
|
||
name="username"
|
||
:rules="[{ required: true, message: 'Please input your username!' }]"
|
||
>
|
||
<a-input v-model:value="formState.username">
|
||
<template #prefix>
|
||
<UserOutlined class="site-form-item-icon" />
|
||
</template>
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="Password"
|
||
name="password"
|
||
:rules="[{ required: true, message: 'Please input your password!' }]"
|
||
>
|
||
<a-input-password v-model:value="formState.password">
|
||
<template #prefix>
|
||
<LockOutlined class="site-form-item-icon" />
|
||
</template>
|
||
</a-input-password>
|
||
</a-form-item>
|
||
|
||
<div class="login-form-wrap">
|
||
<a-form-item name="remember" no-style>
|
||
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
|
||
</a-form-item>
|
||
<a class="login-form-forgot" href="">Forgot password</a>
|
||
</div>
|
||
|
||
<a-form-item>
|
||
<a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
|
||
Log in
|
||
</a-button>
|
||
Or
|
||
<a href="">register now!</a>
|
||
</a-form-item>
|
||
</a-form>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, reactive, computed } from 'vue';
|
||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||
interface FormState {
|
||
username: string;
|
||
password: string;
|
||
remember: boolean;
|
||
}
|
||
export default defineComponent({
|
||
components: {
|
||
UserOutlined,
|
||
LockOutlined,
|
||
},
|
||
setup() {
|
||
const formState = reactive<FormState>({
|
||
username: '',
|
||
password: '',
|
||
remember: true,
|
||
});
|
||
const onFinish = (values: any) => {
|
||
console.log('Success:', values);
|
||
};
|
||
|
||
const onFinishFailed = (errorInfo: any) => {
|
||
console.log('Failed:', errorInfo);
|
||
};
|
||
const disabled = computed(() => {
|
||
return !(formState.username && formState.password);
|
||
});
|
||
return {
|
||
formState,
|
||
onFinish,
|
||
onFinishFailed,
|
||
disabled,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style>
|
||
#components-form-demo-normal-login .login-form {
|
||
max-width: 300px;
|
||
}
|
||
#components-form-demo-normal-login .login-form-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
#components-form-demo-normal-login .login-form-forgot {
|
||
margin-bottom: 24px;
|
||
}
|
||
#components-form-demo-normal-login .login-form-button {
|
||
width: 100%;
|
||
}
|
||
</style>
|