## 简介

Vue3.0 版本,基于 element-plus 表单设计器 仿明道云设计器

## 依赖

element-plus

```sh
$ npm i element-plus
```

或自行引入 cdn

## 安装

```sh
$ yarn
$ yarn dev
```

### html

演示仓库
https://gitee.com/owen_yang/vform-designer.git

目前已发布低代码平台：
http://38.147.173.55:8008/ 低代码多租户平台
http://38.147.173.55:8088/ 低代码多应用平台

更多交流 QQ 群：780382507 欢迎大家一起交流反馈

## 使用

```
// 组件
import { FormDesign, ProForm, ProFormItem } from 'dform-designer';
import "dform-designer/dist/designer.style.css" //引入样式
```

```
<template>
  <FormDesign ref="formDesign" formSchema="formSchema" :formProp="formProp">
    <!--顶部插槽按钮-->
    <template #header>
      <el-button-group>
        <el-button type="primary" size="mini" icon="SuccessFilled" @click="confirm()">发布</el-button>
      </el-button-group>
    </template>
  </FormDesign>
</template>
<script lang="ts" setup>
// 表单整体配置项
const formProp: any = ref({
  state: "",
  inline: false,
  labelPosition: "top",
  labelWidth: "120px",
  disabled: false,
  labelSuffix: "",
});
// 初始化表单数据
const formSchema: any = ref([
  {
    type: "Text",
    formItem: { required: true },
    col: { span: 24 },
    label: "名称",
    prop: "df_mingcheng",
    el: "el-input",
    props: { clearable: true, placeholder: "请输入名称" },
  },
  {
    type: "Text",
    formItem: { required: false },
    col: { span: 24 },
    label: "描述",
    prop: "df_miaoshu",
    el: "el-input",
    props: { clearable: true, placeholder: "请输入描述", type: "textarea" },
  }
]);
</script>
```

#### 交流

QQ 群：780382507

### 效果图

<br>
<img  src="https://gitee.com/owen_yang/vform-designer/raw/master/doc/mdy1.png" height="300" >
<br>

### 事件

| 名称       | 说明             | 回调参数        |
| ---------- | ---------------- | --------------- |
| formProp   | 表单初始化数据   | 当前配置的 json |
| formSchema | 设计器初始化数据 | 当前配置的 json |

### 插槽

| 名称   | 说明           |
| ------ | -------------- |
| header | 顶部工具栏插槽 |

````

## 打包
```sh
$ yarn build
````
