本文共 1371 字,大约阅读时间需要 4 分钟。
最近2年一直在用vue做前端,发现vue写出来的代码可维护性比较高,但是同样一个功能代码行数比较多。
就拿一个普通的表单来说,先写template,然后定义data,然后在写校验,然后写method,确实有点麻烦了。
就想着有没有一种办法,做一种语法糖出来,保证vue原生代码支持的情况下把简单的功能简化。
在开源中国看到百度的 amis项目,他使用json来画页面,代码非常的少,但是因为不支持自定义js扩展,所以做很多外部系统不是很好用。
结合我做 fhs framework pagex模块的经验,提出了以下的思路。
比如我写一个表单页面,我可以这样写:
{ id:"addForm", attr:{"class":"formClass",style:"with:100%"} config: {saveUrl: '/data/tank_owner/save',infoUrl:'/data/tank_owner/findById'}, hook:{onSubmit:addFormOnSubmit}, type:'form', child: [ { title: '基础信息', type: 'group', }, { title: '联系人', name: 'linkMan', type: 'input', required: true, dataType:'s-1-32' }, { title: '联系地址', type: 'addressSelect', required: true, multiple : false, }, { title:'备注', type:'textarea', name:'remark' }, { title:'人员列表', data:'tableData', type:'table', columns: [ { title: '姓名', name:'userName' }, { title: '操作', template: ` 编辑 `,*/ } ], }, ]}
转载地址:http://vhwni.baihongyu.com/