Vue Json Design

The newly developed VUE visual designer is ready for production

Vue interface visual designer, based on VJForm

The designer features can support any vUE project referenced components, without the need for secondary development can be defined to support components and components of the attributes, and the relationship between the attributes and data of components and forms of interaction can also be implemented through the designer configuration

features

  • Visualize drag and drop layouts
  • Support for any HTML elements and components referenced in a VUE project
  • Support editing of data association and interaction behavior
  • Components and properties supported by the editor can be extended with JSON-formatted data
  • Component rendering on the designer and property editor support secondary development

Getting Start

Run the project

Clone project, execute

npm install
Copy the code

after

npm run dev
Copy the code

Use NPM package

npm i vjdesign
Copy the code
import Vue from 'vue'
import vjdesign from 'vjdesign'
import 'vjdesign/dist/vjdesign.css'
 
Vue.use(vjdesign)
Copy the code

A link to the

The online sample renders jFormer using a document dynamic form

Use the JFormer component to render the interface directly with the JSON definition in the designer metadata

Dynamic forms render VjForms

If you use VjForm as a rendering component, you need to reference the expression support library, the VUE scoped transformation, and the designer edit transformation in the VjForm

import vjform from 'vjform'
import expression from 'jpresent-transform-expression'
 
vjform.use(expression)
Copy the code

The source code

Github

Gitee