快速上手
本节将以ElementPlus版本为例介绍如何在项目中使用 form-create
其他版本的 UI 示例
引入
浏览器
html
<!-- import Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.min.js"></script>
<!-- import element-ui -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.full.min.js"></script>
<!-- import formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/element-ui@next/dist/form-create.min.js"></script>
<!-- 挂载组件 -->
<script >
app.use(ElementPlus);
app.use(formCreate);
</script>
<!-- import Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.min.js"></script>
<!-- import element-ui -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.full.min.js"></script>
<!-- import formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/element-ui@next/dist/form-create.min.js"></script>
<!-- 挂载组件 -->
<script >
app.use(ElementPlus);
app.use(formCreate);
</script>
NodeJs
在 main.js 中写入以下内容:
js
import ElementPlus from 'element-plus/es/index'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'
app.use(ElementPlus)
app.use(FormCreate)
import ElementPlus from 'element-plus/es/index'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'
app.use(ElementPlus)
app.use(FormCreate)
生成表单
可通过以下2种方式创建表单:
组件模式, 全局方法
组件模式
使用 <form-create></form-create>
标签创建表单
html
<div id="app">
<form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div>
<div id="app">
<form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div>
NodeJs
js
export default {
data() {
return {
//实例对象
fApi: {},
//表单数据
formData: {},
//表单生成规则
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
option: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
}
}
}
}
export default {
data() {
return {
//实例对象
fApi: {},
//表单数据
formData: {},
//表单生成规则
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
option: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
}
}
}
}
在 setup 中使用
vue
<template>
<FormCreate :rule="rule" :option="options" v-model="formData" v-model:api="fApi"></FormCreate>
</template>
<script setup>
//导入 form-create
import formCreate from "@form-create/element-ui";
import {ref} from "vue";
//获取 formCreate 组件
const FormCreate = formCreate.$form();
const fApi = ref({});
const formData = ref({});
const options = ref({
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
});
const rule = ref([
{
type:'input',
field:'goods_name',
title:'商品名称',
value:'form-create'
},
{
type:'checkbox',
field:'label',
title:'标签',
value:[0,1,2,3],
options: [
{label:'好用',value:0},
{label:'快速',value:1},
{label:'高效',value:2},
{label:'全能',value:3},
]
},
]);
</script>
<template>
<FormCreate :rule="rule" :option="options" v-model="formData" v-model:api="fApi"></FormCreate>
</template>
<script setup>
//导入 form-create
import formCreate from "@form-create/element-ui";
import {ref} from "vue";
//获取 formCreate 组件
const FormCreate = formCreate.$form();
const fApi = ref({});
const formData = ref({});
const options = ref({
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
});
const rule = ref([
{
type:'input',
field:'goods_name',
title:'商品名称',
value:'form-create'
},
{
type:'checkbox',
field:'label',
title:'标签',
value:[0,1,2,3],
options: [
{label:'好用',value:0},
{label:'快速',value:1},
{label:'高效',value:2},
{label:'全能',value:3},
]
},
]);
</script>
全局方法
使用 window 全局方法formCreate.create(rule,option)
创建表单
html
<div id="app3">
<div id="form-create"></div>
</div>
<div id="app3">
<div id="form-create"></div>
</div>
js
//表单插入的节点
const root = document.getElementById('form-create')
const fApi = window.formCreate.create(
//表单生成规则
[
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
{
el: root,
//显示表单重置按钮
resetBtn: true,
//表单提交事件
onSubmit: function (formData) {
//按钮进入提交状态
fApi.btn.loading()
}
})
//表单插入的节点
const root = document.getElementById('form-create')
const fApi = window.formCreate.create(
//表单生成规则
[
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
{
el: root,
//显示表单重置按钮
resetBtn: true,
//表单提交事件
onSubmit: function (formData) {
//按钮进入提交状态
fApi.btn.loading()
}
})