Skip to content

组件生成规则

说明

规则生成器的配置方法名称与规则的配置项相同,配置参数也相同

示例

例如生成一个 input 组件:

基础配置

type

  • 类型: string
  • 说明: 设置生成的组件名称

field

  • 类型: string
  • 说明: 设置表单组件的字段名称,自定义组件可以不配置

title

  • 类型: string|Rule
  • 说明: 字段的名称,可以不设置

name

  • 类型: string
  • 说明: 设置组件的别名

value

  • 类型: any
  • 说明: 表单组件的字段值,自定义组件可以不用设置

info

native

  • 类型: bool
  • 说明: 是否原样生成组件,不嵌套的FormItem

hidden

  • 类型: bool
  • 说明: 设置组件是否渲染

display

  • 类型: bool
  • 说明: 设置组件是否显示

prefix

  • 类型: string|Rule
  • 说明: 设置组件的前缀显示
  • 配置说明

suffix

  • 类型: string|Rule
  • 说明: 设置组件的后缀显示
  • 配置说明

通用配置

props

  • 参数: object
  • 说明: 设置组件的props

class

  • 参数: object|string|Array
  • 说明: 设置组件的class

style

  • 参数: object|string
  • 说明: 设置组件的style

on

  • 参数: object
  • 说明: 设置组件的事件

directives

  • 参数: object
  • 说明: 设置组件的自定义指令

slot

  • 参数: string
  • 说明: 设置组件的插槽名称,如果组件是其它组件的子组件,需为插槽指定名称

扩展配置

component

  • 类型: object|Component
  • 说明: 定义用于当前规则渲染的组件, 可以无需挂载
  • 配置说明

validate

  • 类型: Array
  • 说明: 设置表单组件的验证规则
  • 配置说明

options

  • 类型: Array|Function
  • 说明: 设置radio,select,checkbox等组件options选择项,可以通过optionsTo自定义数据插入的位置

optionsTo

  • 类型: string
  • 说明: 设置options配置项插入的位置. 例如props.data

inject

  • 类型: any
  • 说明: 设置事件注入是的自定义数据
  • 配置说明

effect

update

  • 类型:
ts
//init初始化触发,link关联触发,value变化触发
type Origin = 'init' | 'link' | 'change';
type update = (value:any, api:Api, origin:Origin) => bool|undefined;
  • 说明: 设置 update 回调,可以配合link配置项使用

  • 配置说明

  • 类型: Array
  • 说明: link 中配置的字段发生变化后,触发该组件的 update
  • 配置说明

col

  • 类型: object
  • 说明: 设置组件的布局规则
  • 配置说明

wrap

  • 类型: object
  • 说明: 设置组件的FormItem规则
  • 配置说明

sync

  • 类型: Array
  • 说明: 配置prop.sync,设置props中需要双向绑定属性的名称

control

children

  • 类型: Array<rule|string|maker>|Function

  • 说明: 设置父级组件的插槽,默认为default.可配合 slot 配置项使用

  • 示例1

    js
    formCreate.maker.create('button').children([
       '按钮内容' 
    ])
  • 示例2

js
  maker.input('text','text','text').children([
      maker.create('span').children(['append']).slot('append')
  ])
  • 示例3
js
  formCreate.maker.create('i-row').children([
    formCreate.maker.create('i-col').props('span',12).children([
      formCreate.maker.template('<span>自定义组件</span>', () => new Vue)
    ]),
  ])

emit

  • 类型: Array
  • 说明: 使用emit方式触发的事件名,可与emitPrefix参数配合

示例:

js
//以下三种方式效果相同


const rules = [{//emit 方式触发 change 事件
    field:'goods_name',
    //...
    emit:['change']
},{// 自定义 emit 事件前缀,默认为 field 字段
    field:'goods_info',
    //...
    emit:['change'],
    emitPrefix:'gi'
},{// 直接在规则写回调方法
     field:'goods_tag',
     //...
     on:{
         change:function() {
           //TODO
         }
     }
 }]
html
<div id="app">
  <form-create :rule="rules" @goods-name-change="change" @gi-change="change"></form-create>
</div>
js
new Vue({
   el:'#app',
    data: {
        rules:rules
    },
    methods:{
        change:function(){
            //TODO
        }
    }
})

emitPrefix

  • 类型: object
  • 说明: 自定义 组件emit 事件的前缀
  • 默认: 组件 field 字段
  • 配置说明