antv设计器 基于kzc66开源的修改用于自己业务
📖文档地址：https://kcz66.gitee.io/epic-designer/
💎项目预览地址：
pnpm i cbd-designernpm i ant-design-vuemain.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>