FcDesigner Pro

Appearance

跨项目渲染 ​

跨项目渲染时可能出现组件无法渲染问题，本文提供完整解决方案。

注意

高级版设计器基于开源渲染器扩展了功能并新增组件，使用时需从设计器包中导入对应的专用渲染器。

跨项目使用 ​

当您需要在其他项目中使用设计器生成的表单规则时，只需要导入对应的渲染器即可，无需完整导入设计器。高级版设计器基于开源渲染器扩展了功能并新增组件，因此需要使用设计器包中的专用渲染器。

渲染器文件说明 ​

设计器包中提供了不同框架的渲染器文件：

PC 端渲染器（位于 dist/render 目录）：

  • Element Plus/Element UI: dist/render/element-plus/form-create.[es|umd].js
  • Ant Design Vue: dist/render/ant-design-vue/form-create.[es|umd].js

移动端渲染器（位于 dist/mobile 目录）：

  • Vant: dist/mobile/form-create.vant.[es|umd].js

注意

跨项目使用时只需要导入渲染器，不需要导入完整的设计器包。渲染器文件体积更小，仅包含表单渲染所需的功能。

使用步骤 ​

1. 复制渲染器文件

将设计器包中对应的渲染器文件复制到目标项目中，例如复制到 src/libs 目录：

Element Plus/Element UI 版本：

fcDesignerPro/dist/render/element-plus/form-create.es.js
→ 目标项目/src/libs/form-create.es.js

Ant Design Vue 版本：

fcDesignerPro/dist/render/ant-design-vue/form-create.es.js
→ 目标项目/src/libs/form-create.es.js

移动端版本：

fcDesignerMobile/dist/mobile/form-create.vant.es.js
→ 目标项目/src/libs/form-create.vant.es.js

2. 替换渲染器导入

在目标项目中，将开源版渲染器的导入替换为高级版渲染器。

Element Plus/Element UI 版本：

替换前：

js
import formCreate from "@form-create/element-ui"

替换后：

js
import formCreate from "@/libs/form-create.es.js"
// 或使用相对路径
// import formCreate from "src/libs/form-create.es.js"

Ant Design Vue 版本：

替换前：

js
import formCreate from "@form-create/ant-design-vue"

替换后：

js
import formCreate from "@/libs/form-create.es.js"
// 或使用相对路径
// import formCreate from "src/libs/form-create.es.js"

移动端版本：

替换前：

js
import formCreate from "@form-create/vant"

替换后：

js
import formCreate from "@/libs/form-create.vant.es.js"
// 或使用相对路径
// import formCreate from "src/libs/form-create.vant.es.js"

完整使用示例 ​

Element Plus/Element UI 版本：

在 main.js 中挂载：

js
import { createApp } from 'vue'
import App from './App.vue'
import formCreate from '@/libs/form-create.es.js'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

// 挂载 ElementPlus
app.use(ElementPlus)
// 挂载 formCreate
app.use(formCreate)

app.mount('#app')

在组件中使用：

vue
<template>
    <form-create v-model="formData" :rule="rule" v-model:api="fApi" @submit="handleSubmit"></form-create>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})
const fApi = ref(null)
const rule = ref([
    // 从设计器导出的表单规则
])

function handleSubmit(data) {
    console.log('表单数据:', data)
}
</script>

Ant Design Vue 版本：

在 main.js 中挂载：

js
import { createApp } from 'vue'
import App from './App.vue'
import formCreate from '@/libs/form-create.es.js'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

const app = createApp(App)

// 挂载 Ant Design Vue
app.use(Antd)
// 挂载 formCreate
app.use(formCreate)

app.mount('#app')

在组件中使用：

vue
<template>
    <form-create v-model="formData" :rule="rule" v-model:api="fApi" @submit="handleSubmit"></form-create>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})
const fApi = ref(null)
const rule = ref([
    // 从设计器导出的表单规则
])

function handleSubmit(data) {
    console.log('表单数据:', data)
}
</script>

移动端版本：

在 main.js 中挂载：

js
import { createApp } from 'vue'
import App from './App.vue'
import formCreate from '@/libs/form-create.vant.es.js'
import vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)

// 挂载 Vant
app.use(vant)
// 挂载 formCreate
app.use(formCreate)

app.mount('#app')

在组件中使用：

vue
<template>
    <form-create-mobile v-model="formData" :rule="rule" v-model:api="fApi" @submit="handleSubmit"></form-create-mobile>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})
const fApi = ref(null)
const rule = ref([
    // 从设计器导出的表单规则
])

function handleSubmit(data) {
    console.log('表单数据:', data)
}
</script>

说明

如果对源码做了二次开发，扩展了新组件，就需要按照下面的文档重新打包渲染器。

扩展组件 ​

入口文件 ​

element-plus/element-ui 版本对应:

/src/form/elm.js

ant-design-vue 版本对应:

/src/form/antdv.js

移动端版本对应:

/src/form/mobile.js

build2

挂载组件 ​

将自定义扩展组件导入上述文件并完成挂载，具体操作可参考示例组件。例如导入扩展组件中的示例组件

注意

1.若表单依赖全局方法或变量，需在目标项目中同步定义对应依赖。

2.自定义组件和打包文件中禁止使用框架全局方法，避免跨项目迁移时功能失效。

导入自定义Vue组件（Title和Input），并使用 formCreate.component 方法将它们挂载到表单中

js
//导入组件
import Title from 'Title.vue';
import Input from 'Input.vue';

//挂载组件
formCreate.component('Title', Title);
formCreate.component('FcInput', Input);

更新渲染器版本 ​

通过 npm 命令更新渲染器至最新版本，可提升稳定性和修复已知问题。

element-plus/element-ui

sh
npm update @form-create/element-ui

ant-design-vue

sh
npm update @form-create/ant-design-vue

移动端

sh
npm update @form-create/vant

重新打包渲染器 ​

在设计器项目根目录执行打包命令

element-plus/element-ui

sh
npm run build:elm

ant-design-vue

sh
npm run build:antdv

移动端

sh
npm run build:mobile

build3

打包后的渲染器会在 dist/render 目录下