dd-form-designer

XDK低代码平台量表设计器

基本信息

• 作者：XDK-湛亚磊
• 版本：1.1.5
• 描述：
  • 1. 为了方便XDK平台的量表开发，开发了一套低代码的量表。其中dd-form-designer是量表设计器，用于将量表渲染成页面。
  • 2. 借鉴了VForm的思路，在开发过程中VFrom只是做了拖拽和渲染这些。但是，我们业务需要组件关联数据，并计算和分析结果。所以，我们在VForm的基础上，开发了dd-form-designer，用于快速生成量表。
  • 3. VForm使用了Vue3+vite。但是作者在代码开发过程中，使用了大量的vue2的用法。所以，我们对此进行了vue3的改造重写。后续的话可能会考虑使用TS重写。

使用方法

注意： 安装了dd-form-designer的话，就不需要再安装dd-form-render了

• 1. 安装
  • npm install dd-form-designer
  • yarn add dd-form-designer
• 2. 注意:
  • 需要安装dd-form-draggable
  • 使用

       import draggable from "dd-form-draggable"
       app.component('draggable', draggable)

• 3. 使用

  import ElementPlus from 'element-plus'  //引入element-plus库
  import 'element-plus/dist/index.css'  //引入element-plus样式
  import 'dd-form-render/dist/render.style.css'  //引入VFormRender样式
  import DdFormDesigner from 'dd-form-designer'
  app.use(DdFormDesigner)

• 3. 页面引用

  <template>
    <div>
      <dd-form-designer ref="vFormRef">
      </dd-form-designer>
    </div>
  </template>
  
  <script setup>
  import {ref, reactive} from 'vue'
  import {ElMessage} from 'element-plus'
  </script>