form builder 文档

使用

1. 安装依赖

npm install @pfan/form-view-builder -S

2. 初始化

import FormBuilder from '@pfanform-view-builder'
import '@pfanform-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 | - |