45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<template>
|
|
<Form v-model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
|
|
@finish="onFinish" @finishFailed="onFinishFailed">
|
|
<Form.Item label="Username" name="username"
|
|
:rules="[{ required: true, message: 'Please input your username!' }]">
|
|
<Input v-model:value="formState.username" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Password" name="password"
|
|
:rules="[{ required: true, message: 'Please input your password!' }]">
|
|
<InputPassword v-model:value="formState.password" />
|
|
</Form.Item>
|
|
|
|
<Form.Item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
|
|
<Checkbox v-model:checked="formState.remember">Remember me</Checkbox>
|
|
</Form.Item>
|
|
|
|
<Form.Item :wrapper-col="{ offset: 8, span: 16 }">
|
|
<Button type="primary" html-type="submit">Submit</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive } from 'vue';
|
|
import { Form, Input, Checkbox, Button, InputPassword } from 'ant-design-vue'
|
|
|
|
interface FormState {
|
|
username: string;
|
|
password: string;
|
|
remember: boolean;
|
|
}
|
|
|
|
const formState = reactive<FormState>({
|
|
username: '',
|
|
password: '',
|
|
remember: true,
|
|
});
|
|
const onFinish = (values: any) => {
|
|
console.log('Success:', values);
|
|
};
|
|
|
|
const onFinishFailed = (errorInfo: any) => {
|
|
console.log('Failed:', errorInfo);
|
|
};
|
|
</script> |