# DcPageDesigner 页面设计器

**Repository Path**: widthunkon/DcPageDesigner

## Basic Information

- **Project Name**: DcPageDesigner 页面设计器
- **Description**: 大诚页面设计器是一款开箱即用的拖拽式低代码设计器。它基于 Vue3 + AntDesignVue 开发，除了基础的页面设计功能，DcPageDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，DcPageDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：设计器和构造器。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-12-04
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大诚页面设计器使用文档

- [大诚页面设计器使用文档](#大诚页面设计器使用文档)
  - [1. 简介](#1-简介)
    - [DcPageDesigner 设计器](#dcpagedesigner-设计器)
    - [DcPageBuilder 构造器](#dcpagebuilder-构造器)
    - [产品特性](#产品特性)
    - [demo演示](#demo演示)
    - [项目文档](#项目文档)
    - [联系我们](#联系我们)
  - [2. 快速上手](#2-快速上手)
    - [安装 dc-page-designer](#安装-dc-page-designer)
    - [Designer（设计器）基本用法](#designer设计器基本用法)
    - [Builder（构造器）基本用法](#builder构造器基本用法)


## 1. 简介
大诚页面设计器是一款开箱即用的拖拽式低代码设计器。它基于 Vue3 + AntDesignVue 开发，除了基础的页面设计功能，DcPageDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，DcPageDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。

### DcPageDesigner 设计器
<font color=#3e8bf2>DcPageDesigner</font> 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。

### DcPageBuilder 构造器
<font color=#3e8bf2>DcPageBuilder</font> 是一个页面构建组件，它可以将设计器生成的 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 --save
```

main.js 或者 main.ts 引入并使用组件，示例：
```javascript
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（设计器）基本用法
```html
<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（构造器）基本用法
```html
<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>
```