安装依赖

npm install tq-customform-view -S

初始化

import FormBuilder from 'tq-customform-view'
import 'tq-customform-view/dist/tq-customform-view.css'
Vue.use(FormBuilder)

代码示例

<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>

API

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