Vue Lowcode Platform

Vue低代码表单平台组件 - 支持拖拽生成表单

特性

• 🎯 拖拽生成：通过拖拽组件快速生成表单
• 🎨 可视化配置：可视化配置组件属性
• 📦 组件丰富：支持输入框、按钮、选择器等多种组件
• 🔧 高度可定制：支持自定义组件和配置
• 📤 配置导出：支持导出完整的表单配置
• 🎪 ElementUI集成：基于ElementUI组件库

安装

npm install vue-lowcode-platform

使用

基础用法

<template>
  <div id="app">
    <LowCodePlatform />
  </div>
</template>

<script>
import LowCodePlatform from 'vue-lowcode-platform'

export default {
  name: 'App',
  components: {
    LowCodePlatform
  }
}
</script>

自定义组件类型

<template>
  <div id="app">
    <!-- 只显示输入框和按钮组件 -->
    <LowCodePlatform :componentTypes="['el-input', 'el-button']" />
  </div>
</template>

<script>
import LowCodePlatform from 'vue-lowcode-platform'

export default {
  name: 'App',
  components: {
    LowCodePlatform
  }
}
</script>

作为Vue插件使用

import Vue from 'vue'
import LowCodePlatform from 'vue-lowcode-platform'

Vue.use(LowCodePlatform)

命名导入

import { 
  LowCodePlatform, 
  ComponentPanel, 
  componentList 
} from 'vue-lowcode-platform'

依赖要求

• Vue ^2.6.0
• ElementUI ^2.15.0
• vuedraggable ^2.24.3

API

组件

LowCodePlatform

主要的低代码平台组件

Props:

• componentList (Array): 自定义组件列表
• initialConfig (Object): 初始配置

Events:

• config-change: 配置变更时触发
• export-config: 导出配置时触发

ComponentPanel

组件面板组件

Props:

• componentList (Array): 组件列表
• draggable (Boolean): 是否可拖拽

Events:

• dragstart: 开始拖拽时触发

配置

componentList

组件配置列表

[
  {
    type: 'el-input',
    label: '输入框',
    defaultProps: {
      field: 'input1',
      label: '输入框',
      placeholder: '请输入内容'
    }
  }
]

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

许可证

MIT