大诚页面设计器使用文档

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

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:[email protected]

2. 快速上手

本产品是基于 Vue3 + AntDesignVue 开发，在使用之前，请先安装 ant-design-vue 4.x 版本。

安装 dc-page-designer

npm install dc-page-designer --save

main.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>