前言:
最近2年一直在用vue做前端,发现vue写出来的代码可维护性比较高,但是同样一个功能代码行数比较多。
就拿一个普通的表单来说,先写template,然后定义data,然后在写校验,然后写method,确实有点麻烦了。
就想着有没有一种办法,做一种语法糖出来,保证vue原生代码支持的情况下把简单的功能简化。
在开源中国看到百度的https://gitee.com/baidu/amis amis项目,他使用json来画页面,代码非常的少,但是因为不支持自定义js扩展,所以做很多外部系统不是很好用。
结合我做 fhs framework pagex模块的经验,提出了以下的思路。
小目标
比如我写一个表单页面,我可以这样写:
<template>
<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: `<template slot-scope="scope">
<router-link
v-auth="2"
:to="{
path: '/dataCustomerManagerEdit',
query: { id: scope.row.userId}
}"
>
编辑
</router-link>
</template>`,*/
}
],
},
]
}
</pagex>
</template>
<script>
export default {
data() {
return {
tableData:[]
}
},
async created() {
await this._getTableData();
},
methods: {
addFormOnSubmit(){
let needSubForm = clone(this.addForm);
if(!needSubForm.linkMan){
needSubForm.linkMan = '我是默认值'
}
return needSubForm;
},
_getTableData(){
this.tableData = [{userName:'zhangsan',"userid":1}];
},
}
}
</script>