introduction

vue-designer-online is an online page designer，Integrating vue-designer -online can quickly implement an online page design tool. It is base on Vue, which is component-based and data-driven.

install

 yarn add vue-designer-noline

use example

  import Vue from 'vue'
  import VueDesignerOnline from 'vue-designer-online'

  Vue.use(VueDesignerOnline)

  // template
          <vue-designer-online
            :views="views"
            :vnodes="vnodes"
            :vnodeId="vnodeId"
            @insert-vnode="insertVnode"
            @delete-vnode="deleteVnode"
            @copy-vnode="copyVnode"
            @cut-vnode="cutVnode"
          ></vue-designer-online>

  // script
  export default {
    data: {
      // the focus vnode
      vnodeId: '1',
      // the views of designer
      views: [],
      // this vnodes of designer
      vnodes: []
    },
    methods: {
      // insert a vnode to render context
      insertVnode() {
        // do something
      },
      // delete this focus vnode
      deleteVnode() {
        // do something
      },
      // copy this focus vnode
      copyVnode() {
        // do something
      },
      // cut this focus vnode
      cutVnode() {
        // do something
      },
    }
  }

propertys

| property |type| descript| |----------|----|---------| | views |array| view layer for designer| | vnodes |array| vnode set for designer | | vnodeId |string| id of focus vnode | | vnodeClass|Function| gtters function to set vnode style class | | viewClass |Function| gtters function to set view style class | | unit |number|exchange ratio of rem and pxiel | | LayoutType |object|layout type of page |

events

| event | arguments | description | |-------|-----------|------------| |insert-vnode|vnode|triggered when a new vnode is inserted| |delete-vnode|--|triggered when a vnode is deleted| |copy-vnode|vnodes|triggered when vnode is pasted| |copy-vnode|vnodes|triggered when vnode is copyed| |cut-vnode|vnodes|triggered when vnode is cuted| |pase-vnode|--|triggered when vnode is pased| |vnode-focus|vnode, event|triggered when vnode is focused| |add-view|view|triggered when a view layer is added| |remove-view|view|triggered when a view layer is removed| |remove-view|view|triggered when a view layer is removed| |update-view|view|triggered when a view layer is updated| |update-view|view|triggered when a view layer is updated| |toggle-view|viewId|triggered when view layer is toggled|

methods

|methodName|arguments|description| |----------|---------|-----------| |getViewDom|viewId |get root dom of view layer by viewId| |showViewInfo|viewId |show viewInfo dialog| |paseVnode|targetVnodes, callback: Function(vnodes) |pase targetVnodes into render context|

LayoutType

layout types supported by the designer, the default value if STABLE

STABLE: positioning layout

FLOW: flow type layout

FLEX: flex layout

vnode

vnode is a layer of abstraction of components. It abstracts components into data objects for operation, which is equivalent to the virtual dom of vue, the following are its properties

• key: string, primary key of vnode
• ref: string, handle key of vnode, you can use ref to handle vnode
• id: string, unique identification of vnode
• parentId: string, id of parent vnode
• name: string, componentName of vnode
• text: string, alias name of vnode
• level: number, level of view layer
• index: number, index of vnode
• idx: number, index of same type vnode
• viewId: string, id of the view to which vnode belongs
• staticClass: string, static class of vnode
• class: anyObject, class object of vnode
• style: anyObject, style object of vnode
• attributes: anyObject, native attributes of vnode
• propertys: anyObject, component propertys of vnode
• events: anyObject, event list enabled
• nativeEvents: anyObject, native event list enabled
• layout?:
  • layoutType?: LayoutType, layout type of page
  • ticks?: Tick[], drag boundaries in different directions, available values are 'l', 'r', 't', 'b'
  • l?: Unit, distance to the left of the view layer
  • t?: Unit, distance to the top of the view layer
  • w?: Unit, width of node
  • h?: Unit, height of node }
• children?: Vnode[], child vnodes of parent vnode

view

view layer is an abstraction of page layer, type is an object type, the following are its properties

• descript: string
• id: string, unique identification of view layer
• name: string, name of view layer
• type: viewType, type of view layer, the default value is dialog
• h: Unit, the width of view layer
• w: Unit, the height of view layer
• idx: number, index of view layer

origin component config

vue-designer-online accepts the component configuration of a general data structure. When the component containing this configuration is dragged to the designer's canvas, it will be converted into vnode by the designer and rendered to the page. component config is a JSON format data structure. The following are its properties:

• name: component register name
• text: component chinese alias name
• layout: component layout config
  • dragable: the component can be draged
  • w: the default width of component
  • h: the default height of component
  • ticks: the resize handle of component dom, its aviriabal properties has 'r', 'l', 't', 'b'
• props: array of component property config
  • prop: component property config
  • label: component property chinese alias name
  • value: the default value of component property
  • propType: the data type of component property