使用 FormCreate 渲染 Element Plus 表单
FormCreate 支持多个主流 UI 框架,您可以根据自己项目的需求选择对应的版本进行安装。
请根据您项目中使用的 UI 框架,安装对应的 FormCreate 版本。
Vant UI
版本 移动端
npm i @form-create/vant^3
Element Plus
版本
npm i @form-create/element-ui@^3
Ant Design Vue
版本
npm i @form-create/ant-design-vue@^3
Naive UI
版本
npm i @form-create/naive-ui@^3
Arco Design
版本
npm i @form-create/arco-design@^3
TDesign
版本
npm i @form-create/tdesign@^3
安装后的初始配置
安装完对应的 FormCreate 版本后,您需要将其引入并配置在 Vue 项目中。以下是通用的配置步骤,具体根据您的项目结构和 UI 框架可能略有不同。
引入和注册 FormCreate
在 main.js
或 main.ts
中引入并注册 FormCreate:
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'; // 根据您选择的 UI 框架调整
import 'element-plus/dist/index.css'; // 样式文件
import formCreate from '@form-create/element-ui'; // 引入 FormCreate
const app = createApp(App);
app.use(ElementPlus); // 挂载 UI 框架
app.use(formCreate); // 挂载 FormCreate
app.mount('#app');
在组件中使用 FormCreate
<template>
<div id="app">
<form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const formData = ref({});
const formApi = ref(null);
const formRules = ref([
{
type: 'input',
field: 'username',
title: '用户名',
value: '',
},
{
type: 'input',
field: 'password',
props: {
type:'password'
},
title: '密码',
value: '',
}
]);
</script>
在上面的示例中,我们定义了一个简单的登录表单,包括用户名、密码输入框。表单数据 (formData) 和 API 实例 (formApi) 都是通过 v-model 进行双向绑定的。