# vue3-form-create-designer

**Repository Path**: wang_juan/vue3-form-create-designer

## Basic Information

- **Project Name**: vue3-form-create-designer
- **Description**: 由于formCreateDesigner目前只支持vue2版本，便参考官方源码实现了一个vue3版本，支持官方文档方法
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 1
- **Created**: 2022-08-11
- **Last Updated**: 2023-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: form-create, vue3, elementPlus

## README

#  FormCreateDesigner--VUE3+ElementPlus版本
参考[form-create-designer](http://designer.form-create.com/guide/) 源码升级而成的vue3版本，依然支持官方插件方法。
前端UI组件库：[elementPlus](https://element-plus.gitee.io/zh-CN/) ，
动态表单组件：[formCreate](http://www.form-create.com/v3/guide/)

## npm
```
npm i vue3-form-create-designer
```

## 页面效果
![页面效果](https://raw.githubusercontent.com/841486646/study-master/master/demo.gif)

## 使用

1.全局注册

main.js
```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 

[在这里](./src/views/form/index.vue)