form-view-builder

form builder 文档

使用

1. 安装依赖

npm install form-view-builder -S

2. 初始化

import FormBuilder from 'form-view-builder'
import 'form-view-builder/dist/form-view-builder.css'
Vue.use(FormBuilder)

3. 代码示例

<template>
  <form-view-builder
    v-model="value"
    ref="form"
    v-if="config"
    :json="json"
    :custom="config"
    :controls="controls"
    :state="state"
    @validate="idValidate" />
</template>
<script>
export default {
  data() {
    return {
      value: {},
      config: {},
      json: {},
      controls: {},
      state: ''
    }
  },
  methods: {
    idValidate() {
      console.log('---校验---')
    }
  }
}
</script>

4. API

属性	说明	类型	默认值
value	数据源，由 json 中 name 自动生成的数据源	Object	{}
controls	控制项， 由 json 中 controls 自动生成的控制项，其中 show 属性由 form 自动生成。	Object	-
config	自定义方法配置项，配置项中方法名与 json 中 config 中方法名保持一致，用于组件触发相应方法	Object	-
state	状态栏，值与 json 中 controls 中子属性的状态相对应	String	insert
json	配置文件，最核心的配置项，详情见 json配置详情	Object	-