@huliuyu/form-generator NPM

form-generator

表单设计器，功能包括：表单编辑、表单填报及已填报表单显示

输入图片说明

dev@1.0.0 新增

多个布局组件及辅助型组件

输入图片说明

样式配置

局部样式：每个组件的配置面板单独提供样式配置
全局样式：所有代码均可配置，需要在每个组件的配置面板上选择

事件配置可以编写js代码，触发每个组件的对应事件时执行代码

局部事件：每个组件的配置面板单独提供事件代码编写
全局事件：所有代码均可配置，需要在每个组件的配置面板上选择

使用文档

安装

npm install @huliuyu/form-generator

使用

完整引入

main.js 中
import FG from '@huliuyu/form-generator'
或者 import FG from '@huliuyu/form-generator/form-generator.umd.js'
import '@huliuyu/form-generator/form-generator.css'
Vue.use(FG)

包含组件

编辑器

Alt text

pc端预览

Alt text

移动端预览

Alt text

表单数据查看

Alt text

使用

<template>
  <div style="height: 100%">
    <el-button type="primary" @click="handlePublish">发布</el-button>
    <el-button type="primary" @click="handleValidate">校验</el-button>
    <FGDesigner ref="FGDesigner"  v-model="formConf" />
  </div>
</template>
export default {
  data() {
    return {
      formConf: {},
    };
  },
  methods: {
    handleValidate() {
      this.$refs.FGDesigner.validate((valid, message) => {
        if (valid) {
        } else {
          this.$message.error(message);
        }
      });
    },
    handlePublish() {
      this.$refs.FGDesigner.submit((value) => {
        console.log(value);
      });
    },
  },
};

Attributes

参数	说明	类型	可选值	默认值
value / v-model	为包含表单属性及组件列表的对象	Object	-	-
form	为包含表单组件对应的key和value	Object	-	-
enabled	编辑器控件是否可以点击操作	Boolean	-	false
themeColor	表单编辑器主题色	String	-	-
defaultComs	表单编辑器组件库	Object	-	-

Methods

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个个参数：校验是否通过、校验提示语	Function(callback: Function(Boolean,Array))
submit	对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值	Function(callback: Function(object))

Event

事件名称	说明	回调参数
save	点击保存按钮触发	新状态的value值，新状态的组件列表，新状态的表单属性
change	数据更改触发	新状态的value值

PC表单渲染

Alt text

使用

<template>
  <FGPcForm ref="FGPcForm" v-model="drawingDefalut" :form='form' @submit='handleSubmit'/>
  <el-button @click='submitForm'>提交</el-button>
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
      form:{}
    };
  },

  methods: {
    submitForm() {
      this.$refs["FGPcForm"].validateForm((form) => {
        console.log("form", form);
      });
    },
    resetForm() {
      this.$refs["FGPcForm"].resetForm();
    },
    handleSubmit(form,list) {

    }
  },
};
</script>

Attributes

参数	说明	类型	可选值	默认值
value / v-model	为包含表单属性及组件列表的对象	String	-	-
form	为包含表单组件对应的key和value	Object	-	-

Methods

方法名	说明	参数
validateForm	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入一个参数：即为校验通过的value值	Function(callback: Function(object))
submitForm	对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值	Function(callback: Function(object))
resetForm	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-

phone表单渲染

Alt text

使用

<template>
  <FGPhoneForm ref="FGPhoneForm" v-model="drawingDefalut" />
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },

  methods: {
    submitForm() {
      this.$refs["FGPhoneForm"].validateForm((form) => {
        console.log("form", form);
      });
    },
    resetForm() {
      this.$refs["FGPhoneForm"].resetForm();
    },
  },
};
</script>

Attributes

参数	说明	类型	可选值	默认值
value / v-model	为包含表单属性及组件列表的对象	String	-	-
form	为包含表单组件对应的key和value	Object	-	-

Methods

方法名	说明	参数
validateForm	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入一个参数：即为校验通过的value值	Function(callback: Function(object))
submitForm	对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值	Function(callback: Function(object))
resetForm	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-

phone表单详情

Alt text

使用

<template>
  <FGPhoneShow :value="drawingDefalut" />
</template>
<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },
};
</script>

Attributes

参数	说明	类型	可选值	默认值
value	为包含表单属性及组件列表的对象	String	-	-
form	为包含表单组件对应的key和value	Object	-	-

PC表单详情

Alt text

使用

<template>
  <FGPcShow :value="drawingDefalut" />
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },
};
</script>