FormCreateDesigner--VUE3+ElementPlus版本

参考form-create-designer 源码升级而成的vue3版本，依然支持官方插件方法。 前端UI组件库：elementPlus ， 动态表单组件：formCreate

npm

npm i vue3-form-create-designer

页面效果

使用

1.全局注册

main.js

import { createApp } from 'vue'
const app = createApp(App)
// 引入设计器样式
import 'vue3-form-create-designer/dist/style.css'
import FcDesigner from 'vue3-form-create-designer'
app.use(FcDesigner)

2.局部注册以及具体使用

xxx.vue（注意：组件外层[父盒子]需要指定高度或者给组件传固定高度的[height]属性）

<template>
<div class="fc-designer-wrap">
    <fc-designer ref="fcDesignerRef" >
        <template #btns>
            <el-button plain @click="consoleLog($refs.fcDesignerRef)">打印JSON</el-button>
            <el-button plain @click="consoleLogOptions($refs.fcDesignerRef)">打印Options</el-button>
        </template>
    </fc-designer>
</div>
</template>

<script>
import { defineComponent,ref  } from 'vue'
import FcDesigner from 'vue3-form-create-designer'
import 'vue3-form-create-designer/dist/style.css'

export default defineComponent({
    name: 'index',
    components: { FcDesigner },
    setup () {
        const consoleLog = (ref) => {
            // 控制台打印JSON
            console.log('rule', ref.getRule())
        }

        const consoleLogOptions = (ref) => {
            // 控制台打印Option
            console.log('option', ref.getOption())
        }

        return {
            consoleLog,
            consoleLogOptions,
        }
    }
})
</script>

<style scoped>
	.fc-designer-wrap {
		height: 100vh;
	}
</style>

demo

在这里