安装
根据自己使用的 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>