首先，你需要安装 `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: {
initial
Values: Object,
onFinish: Function,
onFinishFailed: Function,
},
setup(props, { emit }) {
const
form = ref(null);
const handleSubmit = (e) => {
e.preventDefault();
form.
value
.validate
Fields()
.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 的表单组件了。
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
