挂载表单组件

在使用 FormCreate 时，您可以通过全局挂载或局部挂载的方式将表单组件集成到您的 Vue 应用中。本文将介绍如何在 Vue 3 项目中挂载和使用 FormCreate 组件，帮助新用户快速上手。

如何安装 FormCreate

全局挂载

全局挂载方式适用于整个应用都需要使用 FormCreate 表单组件的场景。通过全局挂载，您可以在应用的任意位置直接使用 <form-create> 组件。

import { createApp } from 'vue';
import formCreate from '@form-create/element-ui';
import App from './App.vue';


const app = createApp(App);
app.use(formCreate);
app.mount('#app');

在 Setup 中使用

在 Vue 3 中，您可以在 setup 函数中使用 FormCreate，这种方式更符合 Vue 3 的组合式 API 风格。

<template>
    <formCreate :rule="rule"></formCreate>
</template>
<script setup>
    import formCreate from '@form-create/element-ui';
    import { ref } from 'vue';
    const rule = ref([
        {
            type: 'input',
            field: 'name',
            title: 'Name'
        }
    ]);
</script>

局部挂载

局部挂载适用于只在特定组件中使用 FormCreate 的场景。在这种情况下，您可以将 FormCreate 组件作为局部组件注册到您的 Vue 组件中。

<template>
    <formCreate :rule="rule"></formCreate>
</template>
<script>
    import formCreate from '@form-create/element-ui';
    export default {
        components: {
            formCreate
        },
        data() {
            return {
                rule: [
                    {
                        type: 'input',
                        field: 'name',
                        title: 'Name'
                    }
                ]
            }
        }
    };
</script>