前端小姐姐:“新营业功用又有大批的表单要开辟了,有没让我又高效又愉快地完成这个使命的计划呢?”
哦,我想一想,设置开辟理念,应当比较合适,且社区也有好些这类理念的开源项目
前端小姐姐:“什么叫设置开辟理念呢?”
就是只需要简朴地定义一份JSON设置数据来开辟表单
前端小姐姐:“太棒了,我去search下先哈”
过了一会~~
前端小姐姐:“是真有不少,但我选哪一个好呢?”
恩,那我们就来聊聊设置理念表单开辟的选型吧
1. 协助文档
这是必不可少的啦,没有文档,谁敢用呢
2. 直观特征展现
我可不想一开始就要花大批时候去读冷冰冰的笔墨,然后还要发挥本身的想像力
最好有超直观超抽象超轻易的体式格局展现大部分以至悉数的特征,多是如许的:
3. 开箱即用
最好官方自带一整套常常使用的表单控件和校验划定规矩,满足大部分罕见场景,就不用去自行扩大太多了
比方以下的组件就经常常使用到了:
比方以下的校验划定规矩就经常常使用到了:
4. 扩大才
官方就是供应再多的组件和校验划定规矩,也是没法满足一切的营业场景的,所以必需 友爱(简朴轻易) 支撑开辟者自定义本身的表单组件和校验划定规矩
5. 支撑庞杂数据结构
一个表单数据结构,除了简朴的只要一级属性的对象范例外(如 {name: 'daniel', age: 18}
),现实许多场景多是如许的:
{
"name": {
"firstName": "daniel",
"lastname": "xiao"
}
}
多是如许的:
{
"name": "daniel",
"hobbies": [
{
"id": 1,
"name": "Coding"
},
{
"id": 2,
"name": "Singing"
}
]
}
一句话总结就是:支撑数组范例,对象嵌套对象,对象嵌套数组,数组的项是一般范例 或 对象范例 或 数组范例
6. 表单控件间交互
我想说,一个表单,不是把表单控件按位置悄悄放在那就行了,控件之间并不自力,控件之间是有交互的
这里枚举下具有代表性的一些场景:
- “赞同才继承” 范例
- “都市挑选器” 范例
- “大于18岁必填” 范例
- “日期比较” 范例
- “全名自动填写” 范例
以为已挺多了,就不一一枚举了。
所以,前端小姐姐,假如候选开源项目能够满足以上所提的前提,那就能够用了
前端小姐姐:“哦,那你有引荐吗?”
固然。。。
哈哈,接下来就是广告时候了,假如列位看官们以为以上的选型前提通情达理,那 ncform 就是一个不错的挑选了
ncform,一种使人愉悦的表单开辟体式格局,仅需设置即可天生表单UI及其交互行动。
自带雄厚的 规范组件 和 校验划定规矩,开箱即用。
具有壮大的 控件交互 和 扩大才,做你所想。
接见官方Github相识更多呗:https://github.com/ncform/ncform
tags: vue, form, json-schema, generator