自定义控件

Build支持用户自定义组件,定义好通过 Vue.component('name', component) 注册,然后在定义field时,type属性就是控件名称即可。为了与Build进行交互,自定义控件需要实现v-model的接口,即:props中含有value参数,在数据发生变化时需要抛出 input 事件。同时要注意,控件本身应该对value的变化进行处理,以更现在外部对数据进行修改时即时更新,因此有可能需要避免因监听value变化而导致的死循环问题(可以在内部保存数据,然后与外部的value值进行比较,当比较不一致时才继续处理)。

一个自定义组件主要考虑以下处理:

  1. props 要实现 value 参数,并处理它的变化
  2. 数据变化时要抛出 input 事件
  3. 如果考虑组件分为可编辑,静态展示的不同场景,可以在 props 添加 static 或 mode 来区分不同的处理模式,在外部通过 options 传入即可
  4. 如果是单个组件,可以使用 Build 统一的校验来处理,不需要特别处理。
  5. 如果是复杂组件,可以按例二和例四的示例来处理,示例分别展示了复杂组件和复杂数组组件的例子。

作为自定义组件,Build会传入三个参数:value, validateResult, field。其中value是当前字段的值,validateResult是整个Build的校验对象,field是当前自定义字段对象。

例三展示了自定义布局,适用于原本按layout来自动布局的处理,改为局部自定义布局。

示例一,单一组件

本示例展示了一个简单的自定义组件,手机验证码的组件。不过这些示例未展示 value 作为输入参数的情形,只是用于输出 value。

{{value}}

示例二,复杂组件

本例演示了自定义证件号码,证件类型为一个字段的情况,对应于value是一个对象的形式,如: {type: '', no: ''}。如果要定义这种形式,主要解决以下问题:

  1. 字段定义
  2. 校验处理
  3. 展示处理

通过引入 FormBlock 组件,它提供了 makeFields 和 makeValidateResult 函数,分别用于生成 Build 需要的字段结构和校验对象。因为要引用 FormBlock 组件的实例,所以示例是在 mounted 中进行处理的,通过 $refs 来引用实例。本例需要定义一个内部的 validateResult 对象,在本例中为 validateResult1,它将作为对应字段缺省校验对象中的 children 属性,如代码: this.validateResult[this.field.name].children = this.validateResult1 所示。

对于字段的展示,使用了 FormCell 组件,它自带 label,字段展示和出错显示。

{{value}}

示例三,自定义布局组件

对于不想采用缺省布局展示的场合,可以考虑使用自定义布局。通过定义一个自定义布局组件,并在原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'] 来分别引用证件类型和证件号码两个字段。

{{value}}

示例四,复杂数组组件

{{value}}