使用form-create生成表单组件

  • 使用form-create生成表单组件已关闭评论
  • 36 次浏览
  • A+
所属分类:Web前端
摘要

FormCreate官网:https://www.form-create.com帮助文档:https://form-create.com/v3/2. 生成UI组件


FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定

FormCreate官网:https://www.form-create.com

帮助文档:https://form-create.com/v3/


1. 生成内置组件
<template>   <div>     <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">     </form-create>   </div> </template>  <script> export default {   data() {     return {       fApi: {},       value: {},       options: {         onSubmit: (formData) => {           alert(JSON.stringify(formData))         },         resetBtn: true       },       rule: [         {type: 'input', field: 'field1', title: 'input', value: ''},         {type: 'datePicker', field: 'field2', title: 'date', value: ''},       ]     }   } } </script>

2. 生成UI组件

<template>   <div>     <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">     </form-create>   </div> </template>  <script> export default {   data() {     return {       fApi: {},       value: {},       options: {         onSubmit: (formData) => {           alert(JSON.stringify(formData))         },         resetBtn: true       },       rule: [         {           type: 'AButton',           props: {             size: 'mini'           },           children: ['AButton']         },         {           type: 'AImage',           //非表单组件不会自动生成col,自定义组件需要通过native控制是否生成col           native: false,           props: {             width: '200px',             src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',           }         },       ]     }   } } </script>

 

3. 生成自定义组件

<template>   <div>     <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">     </form-create>   </div> </template>  <script> import {h, defineComponent, resolveComponent} from 'vue' import formCrate from '@form-create/ant-design-vue' import formCreate from "@form-create/ant-design-vue"; // import UserSelect from "./UserSelect.vue"; //自定义表单组件 const UserSelect = defineComponent({   props: {     //预定义     disabled: Boolean,     modelValue: Number,     options: Array,   },   emits: ['update:modelValue'],   data: function () {     return {       value: this.modelValue,     }   },   render() {     return h(resolveComponent('ASelect'), {       disabled: this.disabled,       value: this.value,       'onUpdate:value': this.onChange,       options: this.options     });   },   watch: {     modelValue(n) {       //同步 value 的值       this.value = n     }   },   methods: {     onChange: function (val) {       this.value = val;       //更新组件内部的值       this.$emit('update:modelValue', val)     },   }, });  export default {   beforeCreate() {     //挂载组件     formCrate.component('UserSelect', UserSelect);   },   data() {     return {       fApi: {},       value: {},       options: {         onSubmit: (formData) => {           alert(JSON.stringify(formData))         },         resetBtn: true       },       rule: [         {           type: 'UserSelect',           field: 'field1',           title: '用户选择',           value: '小王',           props: {             options: [               {label: '小王', value: '小王'},               {label: '小李', value: '小李'},             ]           },         },       ]     }   } } </script>

 

4. 通过插槽生成组件

<template>   <div>     <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">     </form-create>   </div> </template>  <script> export default {   data() {     return {       fApi: {},       value: {},       options: {         onSubmit: (formData) => {           alert(JSON.stringify(formData))         },         resetBtn: true       },       rule: [         {           type: 'div',           style: 'width:200px;height:200x;background-color:#FF7271;',           children: [             {               type: 'span',               style: 'color:#FFFFFF;',               children: ['FormCreate']             }           ]         },       ]     }   } } </script>

 

5. 生成HTML标签

<template>   <div>     <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value">       <template #type-UserSelect="scope">         <ASelect :value="scope.model.value" v-bind="scope.prop" @update:value="scope.model.callback">         </ASelect>       </template>     </form-create>   </div> </template>  <script> export default {   data() {     return {       fApi: {},       value: {},       options: {         onSubmit: (formData) => {           alert(JSON.stringify(formData))         },         resetBtn: true       },       rule: [         {           type: 'UserSelect',           field: 'field1',           title: '用户选择',           value: '小王',           props: {             options: [               {label: '小王', value: '小王'},               {label: '小李', value: '小李'},             ]           },         },       ]     }   } } </script>