Skip to content

快速上手

本节将以ElementPlus版本为例介绍如何在项目中使用 form-create

引入

浏览器

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@^3/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)

生成表单

可通过以下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>

NodeJs

js
import formCreate from "@form-create/element-ui";
export default {
    components: {
        formCreate: formCreate.$form()
    },
    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>

全局方法

使用 window 全局方法formCreate.create(rule,option)创建表单

html
<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()
        }
    })