首先，你需要安装 `
ant-
design-
vue` 和 `
vue3` 。
```
npm install
ant-
design-
vue@next
npm install
vue@next
```
然后，你可以创建
一个表单组件 `Form.
vue` ：
```
vue
<template>
<a-form :form="form" @submit="handleSubmit">
<slot />
</a-form>
</template>
<script>
import { defineComponent, ref } from '
vue';
import { Form } from '
ant-
design-
vue';
export default defineComponent({
components: { Form },
props: {
initialValues: Object,
onFinish: Function,
onFinishFailed: Function,
},
setup(props, { emit }) {
const form = ref(null);
const handleSubmit = (e) => {
e.preventDefault();
form.value
.validateFields()
.then((values) => {
if (props.onFinish) {
props.onFinish(values);
}
})
.catch((error) => {
if (props.onFinishFailed) {
props.onFinishFailed(error);
}
});
};
return {
form,
handleSubmit,
};
},
});
</script>
```
在这个
表单组件中，我们使用了 `a-form` 组件和插槽。我们为 `a-form` 组件绑定了 `form` 对象和 `submit` 事件。在组件的 `setup` 函数中，我们定义了
一个 `form` 的引用，并且定义了
一个 `handleSubmit` 函数，用于处理
表单的提交事件。
接下来，我们可以创建
一个表单项组件 `FormItem.
vue` ：
```
vue
<template>
<a-form-item :label="label" :name="name" :rules="rules">
<slot />
</a-form-item>
</template>
<script>
import { defineComponent } from '
vue';
import { FormItem } from '
ant-
design-
vue';
export default defineComponent({
components: { FormItem },
props: {
label: String,
name: String,
rules: Array,
},
});
</script>
```
在这个
表单项组件中，我们使用了 `a-form-item` 组件和插槽。我们为 `a-form-item` 组件绑定了 `label`、`name` 和 `rules` 属性。
现在，我们可以在 `Form.
vue` 组件中使用 `FormItem.
vue` 组件来创建
表单项了：
```
vue
<template>
<Form :form="form" @submit="handleSubmit">
<FormItem label="Username" name="username" :rules="[{ required: true, message: 'Please input your username' }]">
<a-input v-
model:value="formData.username" />
</FormItem>
<FormItem label="Password" name="password" :rules="[{ required: true, message: 'Please input your password' }]">
<a-input-password v-
model:value="formData.password" />
</FormItem>
<FormItem>
<a-button type="primary" html-type="submit">Submit</a-button>
</FormItem>
</Form>
</template>
<script>
import { defineComponent, reactive } from '
vue';
import Form from './Form.
vue';
import FormItem from './FormItem.
vue';
export default defineComponent({
components: { Form, FormItem },
setup() {
const formData = reactive({
username: '',
password: '',
});
const handleSubmit = (values) => {
console.log(values);
};
return {
formData,
handleSubmit,
};
},
});
</script>
```
在这个例子中，我们创建了两个
表单项：用户名和密码。我们使用 `v-
model` 指令将
表单数据绑定到 `formData` 对象上。我们也定义了
一个 `handleSubmit` 函数，在
表单提交时输出
表单数据。
最后，我们需要在 `main.js` 文件中引入 `
ant-
design-
vue` 组件库和 `Form.
vue` 组件：
```js
import { createApp } from '
vue';
import App from './App.
vue';
import
Antd from '
ant-
design-
vue';
import '
ant-
design-
vue/dist/
antd.css';
import Form from './components/Form.
vue';
const app = createApp(App);
app.use(
Antd);
app.component('Form', Form);
app.
mount('#app');
```
现在，我们就可以在
Vue 3 中使用
Ant Design Vue 的
表单组件了。
扫一扫
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
