Quick Start

This section uses the ElementPlus version as an example to show how to use FormCreate to quickly generate forms in your project.

UI Examples for Other Versions

• Element Plus
• Ant Design Vue
• Naive UI
• Arco Design
• TDesign
• Mobile Vant UI

Installation and Import

Using CDN Import

Import Vue, Element Plus, and FormCreate via CDN, perfect for rapid prototyping and testing.

<!-- Import Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- Import Element Plus -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus/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>
<!-- Mount Component -->
<script>
    const app = Vue.createApp({});
    app.use(ElementPlus);
    app.use(formCreate);
    app.mount('#app');
</script>

Using Node.js Import

Install and import Element Plus and FormCreate in your Vue project via npm.

npm install @form-create/element-ui@^3
npm install element-plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'
const app = createApp(App)
app.use(ElementPlus)
app.use(formCreate)
app.mount('#app')

Note

If you haven't globally mounted the UI framework, manually register the required components before form rendering, or directly import the preset components provided by FormCreate load file.

Generating Forms

FormCreate provides two ways to generate forms: component mode and global method.

Component Mode

Use the <form-create> tag to create forms, suitable for most Vue projects.

<template>
    <formCreate :rule="rule" :option="options" v-model="formData" v-model:api="formApi"></formCreate>
</template>
<script setup>
    // Import FormCreate
    import formCreate from "@form-create/element-ui";
    import {ref} from "vue";
    const formApi = ref({});
    const formData = ref({});
    const options = ref({
        // Form submit event
        onSubmit: function (formData) {
            alert(JSON.stringify(formData))
        }
    });
    const rule = ref([
        {
            type:'input',
            field:'goods_name',
            title:'Product Name',
            value:'form-create'
        },
        {
            type:'checkbox',
            field:'label',
            title:'Tags',
            value:[0,1,2,3],
            options: [
                {label:'Easy to Use',value:0},
                {label:'Fast',value:1},
                {label:'Efficient',value:2},
                {label:'All-in-One',value:3},
            ]
        },
    ]);
</script>

Global Method

Use the formCreate.create(rule, option) global method to generate forms, suitable for scenarios where you need to dynamically generate forms outside of Vue components.

<div id="app">
    <div id="form"></div>
</div>

// Node where the form is inserted
const root = document.getElementById('form')
const formApi = window.formCreate.create(
    // Form generation rules
    [
        {
            type: 'input',
            field: 'goods_name',
            title: 'Product Name'
        },
        {
            type: 'datePicker',
            field: 'created_at',
            title: 'Created At'
        }
    ],
    // Component parameter configuration
    {
        el: root,
        // Show form reset button
        resetBtn: true,
        // Form submit event
        onSubmit: function (formData) {
            // Button enters submit state
            formApi.btn.loading()
        }
    })