1.0.5 • Published 1 year ago
dc-page-designer v1.0.5
大诚页面设计器使用文档
1. 简介
大诚页面设计器是一款开箱即用的拖拽式低代码设计器。它基于 Vue3 + AntDesignVue 开发，除了基础的页面设计功能，DcPageDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，DcPageDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。
DcPageDesigner 设计器
DcPageDesigner 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
DcPageBuilder 构造器
DcPageBuilder 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。
产品特性
- 可视化配置页面
- 丰富的组件库
- 提供预览、保存、生成 json等操作
- 支持表单验证
- 面板自定义
- 自定义组件和布局组件扩展
- 布局组件的嵌套功能
- 组件属性配置
- 组件样式配置
- 组件事件配置
demo演示
演示地址：http://www.dcinfo.cn/dcpagedesigner/demo/
项目文档
文档地址：http://www.dcinfo.cn/dcpagedesigner/docs/
联系我们
湖南大诚数据技术有限公司 研发
Email:12188093@qq.com
2. 快速上手
本产品是基于 Vue3 + AntDesignVue 开发，在使用之前，请先安装 ant-design-vue 4.x 版本。
安装 dc-page-designer
npm install dc-page-designer --savemain.js 或者 main.ts 引入并使用组件，示例：
import { createApp } from 'vue'
// 引入ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import dcPageDesigner from 'dc-page-designer'
import 'dc-page-designer/lib/style.css'
const app = createApp(App)
// 使用antd
app.use(Antd);
// 基本使用
app.use(dcPageDesigner)
app.mount('#app')Designer（设计器）基本用法
<template>
<div class="wrap">
<dcPageDesigner @ready="onReady" :options="options" />
</div>
</template>
<script setup>
const onReady = (designer) => {
// designer 为页面设计器管理模块
console.log('页面设计器加载完毕');
};
// 配置项
const options = {
title: '页面设计器',
}
</script>
<style lang="less" scoped>
.wrap {
height: 100vh;
}
</style>Builder（构造器）基本用法
<template>
<div class="wrap">
<dcPageBuilder :pageTemplate="pageTemplate" :data="pageData" @ready="onReady" />
</div>
</template>
<script setup>
const onReady = (builder) => {
// builder 为页面管理器管理模块
console.log('页面构造器加载完毕');
};
// 页面模板
const pageTemplate = {
"data": {
"type": "page",
"label": "页面",
"layout": "flow",
"width": "100%",
"height": "100%",
"children": [
{
"name": "文本域",
"label": "文本域",
"icon": "FormOutlined",
"type": "textarea",
"layoutType": "flow",
"componentProps": {
"bordered": true,
"style": {},
"autoSize": {
"minRows": 2,
"maxRows": 4
}
},
"optionName": "textareaOptions",
"groupName": "基础组件",
"id": "textarea_04891",
"field": "textareaValue"
}
],
"componentProps": {
"style": {
"padding": "30px",
"width": "100%",
"height": "100%"
}
}
},
}
// 页面数据
const pageData = {
textareaValue: "文本域的数据"
}
</script>
<style lang="less" scoped>
.wrap {
height: 100vh;
}
</style>