antv设计器 基于kzc66开源的修改用于自己业务

📖文档地址：https://kcz66.gitee.io/epic-designer/

💎项目预览地址：

• antdv：https://epic.kcz66.com/demo/antdv3/

pnpm i cbd-designer

npm i ant-design-vue

main.ts 或者 main.js 引入注册组件

// 引入k-designer样式
import "cbd-designer/dist/style.css";
// 引入antd UI 重置样式
import "ant-design-vue/dist/reset.css";
import { pluginManager, setupAntd } from "cbd-designer";
// 使用Antd UI
setupAntd(pluginManager);

cbd-designer(设计器) 基础用法

<template>
  <div class="h-full">
    <EDesigner :hiddenHeader="true"
        ref="designerRef"
        @save="handleSubmit" />
  </div>
</template>
<script setup lang="ts">
import { EDesigner } from "cbd-designer";
</script>
<style>
.h-full {
  height: 100vh;
}
</style>

EBuilder(生成器) 基础用法

<template>
  <div>
    <EBuilder ref="xxx" :pageSchema="pageSchema" />
  </div>
</template>
<script setup>
import { EBuilder } from "cbd-designer";
// 通过ref获取数据
const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "输入框",
          type: "input",
          field: "input",
          icon: "epic-icon-write",
          input: true,
          componentProps: {
            defaultValue: "",
            placeholder: "请输入",
            size: "default",
            type: "text",
          },
          id: "gbm1xhrrj5s00",
        },
      ],
      componentProps: {
        style: {
          padding: "16px",
        },
      },
    },
  ],
};
</script>