安装
根据自己使用的 UI 安装相应的版本
//element-plus 版本 npm i @form-create/element-ui@next //ant-design-vue@3.0 版本 npm i @form-create/ant-design-vue@next 快速上手
本文以element-ui为例
import ElementUI from 'element-plus/es/index' import 'element-plus/dist/index.css' import formCreate from '@form-create/element-ui' app.use(ElementUI) app.use(FormCreate) 示例
<!-- * @Author: oneMiu * @Date: 2022-05-17 14:33:56 * @LastEditors: oneMiu * @LastEditTime: 2022-05-18 11:30:03 * @Desc: --> <template> <section> <FormCreate v-model="fApi" :rule="rule" :option="option" /> </section> </template> <script lang="ts"> import { defineComponent, ref, onMounted } from "vue"; export default defineComponent({ name: "FormCreateFoarmat", peops:["formJson"], setup(props,{ emit}) { let fApi = ref({ }) console.log(props.formJson) let rule = ref([{ "type": "select", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等) "field": "s705v90rbcg3", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置 "title": "请假类型", // 组件的名称, 选填 "info": "", //提示信息 "effect": { "fetch": "" }, "props": { // input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！ // text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 // button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） // checkbox 定义复选框。 // color 定义拾色器。 // date 定义日期字段（带有 calendar 控件） // datetime 定义日期字段（带有 calendar 和 time 控件） // datetime-local 定义日期字段（带有 calendar 和 time 控件） // month 定义日期字段的月（带有 calendar 控件） // week 定义日期字段的周（带有 calendar 控件） // time 定义日期字段的时、分、秒（带有 time 控件） // email 定义用于 e-mail 地址的文本字段 // file 定义输入字段和 "浏览..." 按钮，供文件上传 // hidden 定义隐藏输入字段 // image 定义图像作为提交按钮 // number 定义带有 spinner 控件的数字字段 // password 定义密码字段。字段中的字符会被遮蔽。 // radio 定义单选按钮。 // range 定义带有 slider 控件的数字字段。 // reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 // search 定义用于搜索的文本字段。 // submit 定义提交按钮。提交按钮向服务器发送数据。 // tel 定义用于电话号码的文本字段。 // url 定义用于 URL 的文本字段。 "clearable": true }, "options": [{ "value": "1", "label": "事假" }, { "value": "2", "label": "调休" }, { "label": "病假", "value": "3" }, { "label": "年假", "value": "4" }, { "label": "产假", "value": "5" }, { "label": "陪产假", "value": "6" }, { "label": "婚嫁", "value": "7" }, { "label": "例假", "value": "8" }, { "label": "丧假", "value": "9" }, { "label": "哺乳假", "value": "10" } ], "_fc_drag_tag": "select", "hidden": false, "display": true, "$required": "" }, { "type": "datePicker", "field": "7su1moi7tfy8o", "title": "开始时间", "info": "", "props": { "type": "datetime", "placeholder": "请选择开始时间" }, "_fc_drag_tag": "datePicker", "hidden": false, "display": true, "$required": "请选择开始时间" }, { "type": "datePicker", "field": "3wm1moi7vuyvt", "title": "结束时间", "info": "", "props": { "type": "datetime", "placeholder": "请选择结束时间" }, "_fc_drag_tag": "datePicker", "hidden": false, "display": true, "$required": "请选择结束时间" }, { "type": "input", "field": "dyg1moi7xxx16", "title": "时长（小时）", "info": "", "props": { "type": "number", "placeholder": "请输入时长", "readonly": true }, "_fc_drag_tag": "input", "hidden": false, "display": true, "$required": "请输入时长" }, { "type": "input", "field": "3qs1moi80lnhh", "title": "请假事由", "info": "", "props": { "type": "textarea", "placeholder": "请输入请假事由", "rows": 3 }, "_fc_drag_tag": "input", "hidden": false, "display": true, "$required": "" } ]) let option = ref({ // 显示重置表单按扭 resetBtn: true, // 表单提交按扭事件 onSubmit: formData => { // alert(JSON.stringify(formData)); // console.log("获取表单中的数据：", formData); emit('submitForm', formData) //按钮进入提交状态 // this.fApi.btn.loading(); //重置按钮禁用 // this.fApi.resetBtn.disabled(); //按钮进入可点击状态 // this.fApi.btn.finish(); } }) //获取Form表单 model对象 function getFormModelFn() { console.log("Form表单 model对象：", this.fApi.model()); } function getUserNameChange(e) { this.$nextTick(() => { this.rule[2].value = this.rule[0].value; }); console.log(this.fApi.getValue("userName")); } onMounted(() => { }); return { option, getFormModelFn, rule, fApi }; }, }); </script> <style lang="less" scoped> .el-form { padding: 20px 30px 20px 0; width: 100vw; height: 500px; overflow-y: scroll; height: calc(100vh - 100px); background-color: #fff; } </style>