dform-designer

简介

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

依赖

element-plus

$ npm i element-plus

或自行引入 cdn

安装

$ 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

效果图

事件

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

插槽

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

## 打包
```sh
$ yarn build