Vue Json Design

新开发的vue可视化设计器已经可以投入生产了

Vue 界面可视化设计器，基于 vjform

本设计器特色功能就是可以支持任何 vue 项目中被引用的组件，不需要二次开发就可以定义支持的组件以及组件的属性，并且对组件的属性和数据的关系以及表单的交互行为也可以通过设计器配置实现

vjdesign - vue 界面可视化设计器_vjdesign

特性

  • 可视化拖拽布局
  • 支持任何 html 元素和 vue 项目中引用的组件
  • 支持数据关联和交互行为的编辑
  • 通过 json 格式数据就可扩展编辑器支持的组件和属性
  • 组件在设计器上呈现形式和属性编辑器支持二次开发

Getting Start

运行项目

克隆项目，执行

npm install复制代码

之后

npm run dev复制代码

使用 npm 包

npm i vjdesign复制代码
import Vue from 'vue'import vjdesign from 'vjdesign'import 'vjdesign/dist/vjdesign.css'
 Vue.use(vjdesign)复制代码

相关链接

在线示例
使用文档
动态表单呈现 jformer

使用 jformer 组件可直接用设计器元数据中的 json 定义来呈现界面

动态表单呈现 vjform

如果使用 vjform 作为呈现组件，则需要在 vjform 中引用 表达式支持库、vue 作用域转换、设计器编辑转换

import vjform from 'vjform'import expression from 'jpresent-transform-expression'
 vjform.use(expression)复制代码

源码

Github

Gitee