form-create

Appearance

组件生成规则 ​

说明

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

示例 ​

例如生成一个 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;
//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([
   '按钮内容' 
])
    formCreate.maker.create('button').children([
   '按钮内容' 
])

  • 示例2

js
  maker.input('text','text','text').children([
      maker.create('span').children(['append']).slot('append')
  ])
  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)
    ]),
  ])
  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
         }
     }
 }]
//以下三种方式效果相同


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>
<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
        }
    }
})
new Vue({
   el:'#app',
    data: {
        rules:rules
    },
    methods:{
        change:function(){
            //TODO
        }
    }
})

emitPrefix ​

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

Released under the MIT License.

Copyright © 2018-present Xaboy