挂载表单组件

在使用 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';
    // 获取 FormCreate 组件, 最新版本
    const FormCreate = formCreate.$form();
    const rule = ref([
        {
            type: 'input',
            field: 'name',
            title: 'Name'
        }
    ]);
</script>

局部挂载

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

import formCreate from '@form-create/element-ui';


export default {
    components: {
        formCreate: formCreate.$form()
    },
    data() {
        return {
            rule: [
                {
                    type: 'input',
                    field: 'name',
                    title: 'Name'
                }
            ]
        }
    }
};