vue ant design 封装弹窗表单的使用

目录

• vue ant design 封装弹窗表单
• 使用ant-design-vue的Form表单
• 使用脚手架新建项目
• 安装并导入ant-design-vue,使用Form组件
• 启动应用,测试验证

vue ant design 封装弹窗表单

部分效果图：

使用ant-design-vue的Form表单

使用脚手架新建项目

vue create antd-demo

所以，得到了这么一个项目，如下

安装并导入ant-design-vue,使用Form组件

npm install --save ant-design-vue@next

修改main.ts 

import { createApp } from 'vue';
import App from './App.vue';
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
createApp(App).use(Antd).mount('#app');

修改App.vue

修改HelloWorld.vue

启动应用,测试验证

npm run serve启动应用，效果如下

好了，应用就暂时介绍到这里。其实，我更想说说我的疑惑：

Hello.vue中，Username输入框的前面有个图片前缀，Password输入框的前面也有一个图片前缀，都是通过实现的，一眼看去，应该就是通过插槽实现的，但是具体的实现过程是怎样的，尚不清楚。

简单调试了一下，如下图所示。

ant-design-vue的Form组件的FormItem.js的部分源码如下，

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。