【Vue3+Vite+TS】13.0 组件十：强大的表单组件(上)

Posted 2023-03-30

参考技术A 将用到的组件：
很多，涉及到表单的所有组件。
第三方组件：WangEditor

新建src\components\baseline\form\index.ts

调整src\components\baseline\index.ts

路由增加,调整src\router\index.ts

新增src\views\baseline\form\index.vue

到此，基本结构搭建完毕。

如果需要做到表单通过json自动配置组合，需要建立一套完整的ts类型限制。
新建src\components\baseline\form\src\types\types.ts

新建src\components\baseline\form\src\types\rule.ts
该文件从async-validator规则验证github项目中复制出来的，不需要自己思考文件内容。

新建src\components\baseline\form\src\index.vue

运行效果如下：

优化：

效果如下：

表单本身属性扩展：

修改src\views\baseline\form\index.vue

效果如下：

这里需要用到深拷贝，建议使用一个很好地第三方js工具库：

优化src\components\baseline\form\src\index.vue

调整src\views\baseline\form\index.vue

效果基本完成：

像select，是存在option子元素的，调整如下：
修改src\views\baseline\form\index.vue

修改src\components\baseline\form\src\index.vue

效果如下：

修改src\views\baseline\form\index.vue

修改src\components\baseline\form\src\index.vue

效果如下：

Vite打包组件库

参考技术A 去年使用vue3 + TSX封装组件，结果卡在了打包上，直到最近发现，vite提供了tsx的打包插件。

手把手创建Vue3组件库

在 packages/index.ts 中引入相关的组件、工具库、样式。