Build支持用户自定义组件,定义好通过 Vue.component('name', component)
注册,然后在定义field时,type属性就是控件名称即可。为了与Build进行交互,自定义控件需要实现v-model的接口,即:props中含有value参数,在数据发生变化时需要抛出 input 事件。同时要注意,控件本身应该对value的变化进行处理,以更现在外部对数据进行修改时即时更新,因此有可能需要避免因监听value变化而导致的死循环问题(可以在内部保存数据,然后与外部的value值进行比较,当比较不一致时才继续处理)。
一个自定义组件主要考虑以下处理:
作为自定义组件,Build会传入三个参数:value, validateResult, field。其中value是当前字段的值,validateResult是整个Build的校验对象,field是当前自定义字段对象。
例三展示了自定义布局,适用于原本按layout来自动布局的处理,改为局部自定义布局。
本示例展示了一个简单的自定义组件,手机验证码的组件。不过这些示例未展示 value 作为输入参数的情形,只是用于输出 value。
本例演示了自定义证件号码,证件类型为一个字段的情况,对应于value是一个对象的形式,如: {type: '', no: ''}
。如果要定义这种形式,主要解决以下问题:
通过引入 FormBlock 组件,它提供了 makeFields 和 makeValidateResult 函数,分别用于生成 Build 需要的字段结构和校验对象。因为要引用 FormBlock 组件的实例,所以示例是在 mounted 中进行处理的,通过 $refs 来引用实例。本例需要定义一个内部的 validateResult 对象,在本例中为 validateResult1,它将作为对应字段缺省校验对象中的 children 属性,如代码: this.validateResult[this.field.name].children = this.validateResult1
所示。
对于字段的展示,使用了 FormCell 组件,它自带 label,字段展示和出错显示。
对于不想采用缺省布局展示的场合,可以考虑使用自定义布局。通过定义一个自定义布局组件,并在原Build中的layout进行声明,如:
layout: [
['select1', 'select2'],
[{component: 'customlayout', fields: ['type', 'no']}]
],
第三行就是一个自定义布局的示例。它对应的组件为 customlayout ,通过 component 来定义。对应两个字段 'type', 'no'。
使用自定义布局是不需要改变数据组构,即不需要组件为一个对象,只是布局上调整,此时不适合使用自定义组件。
自定义布局组件接受四个参数:value 为 Build的值, validateResult 为校验对象,col为在layout中自动生成的对象(如果是字符串会转为对应的布局对象),fields为布局要处理的字段对象。定义fields时,用的是数组,每项都是对应字段的name值。转为参数时,变成对象形式,其值是Build中fields对应的字段对象值。在本例中使用 fields['type']和fields['no'] 来分别引用证件类型和证件号码两个字段。