# vue-designer-online > 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. Latest version **1.2.7** (published 2021-10-08) · 0 weekly downloads ## Install ```sh npm install vue-designer-online pnpm add vue-designer-online yarn add vue-designer-online bun add vue-designer-online ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.7 | | Published | 2021-10-08 | | First published | 2021-09-08 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 465.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | moyoraka | | Maintainers | miyoraka | ## Links - npm: https://www.npmjs.com/package/vue-designer-online - npm.io page: https://npm.io/package/vue-designer-online ## Recent versions - 1.2.7 (latest) — 2021-10-08 - 1.2.6 — 2021-10-08 - 1.2.5 — 2021-10-08 - 1.2.4 — 2021-10-08 - 1.2.3 — 2021-09-10 - 1.2.2 — 2021-09-09 - 1.2.1 — 2021-09-09 - 1.2.0 — 2021-09-08 - 1.1.9 — 2021-09-08 - 1.1.8 — 2021-09-08 - 1.1.7 — 2021-09-08 - 1.1.6 — 2021-09-08 - 1.1.5 — 2021-09-08 - 1.1.4 — 2021-09-08 - 1.1.3 — 2021-09-08 - … 10 more at https://npm.io/package/vue-designer-online/versions ## README ## 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 ``` ``` // 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 --- _Source: https://npm.io/package/vue-designer-online · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._