44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
import { defineComponent, ref, reactive } from 'vue';
|
|
import { Form, FormItem, Input } from 'ant-design-vue';
|
|
import type { ComponentDemo } from '../../interface';
|
|
|
|
const Demo = defineComponent({
|
|
setup() {
|
|
return () => {
|
|
const onFinish = () => {};
|
|
const onFinishFailed = () => {};
|
|
const formRef = ref();
|
|
const formData = reactive({
|
|
username: '',
|
|
});
|
|
|
|
return (
|
|
<Form
|
|
ref={formRef}
|
|
model={formData}
|
|
labelCol={{ span: 8 }}
|
|
wrapperCol={{ span: 16 }}
|
|
onFinish={onFinish}
|
|
onFinishFailed={onFinishFailed}
|
|
>
|
|
<FormItem
|
|
label="Username"
|
|
name="username"
|
|
rules={[{ required: true, message: 'Please input your username!' }]}
|
|
>
|
|
<Input status={'error'} v-model={[formData.username, 'value']} />
|
|
</FormItem>
|
|
</Form>
|
|
);
|
|
};
|
|
},
|
|
});
|
|
|
|
const componentDemo: ComponentDemo = {
|
|
demo: <Demo />,
|
|
tokens: ['colorError', 'colorErrorBorder', 'colorErrorHover'],
|
|
key: 'danger',
|
|
};
|
|
|
|
export default componentDemo;
|