vue-uieditor v1.1.1

VUE 可视化编辑器(vue-uieditor)

• 基于 VUE 2.x
• 在线可视化VUE开发，所见即所得
• 支持 es2015 JS 语法
• 开发结果不用二次编译，马上可以使用
• 减轻开发成本，提升项目维护效率
• 可实现低代码开发

相关资源

• 本工程开发环境

• demo

• 演示

安装与使用

安装

yarn add vue-uieditor

vue-uieditor资源加载，使用 webpack copy

config.plugin('copy-vue-uieditor-assets').use(CopyWebpackPlugin, [
  [{
    from: './node_modules/vue-uieditor/vue-uieditor',
    to: './vue-uieditor/'
  }]
]);

引用 vue-uieditor

import Vue from 'vue';
import VueUieditor from 'vue-uieditor';

Vue.use(VueUieditor);

使用编辑器组件

<vue-uieditor :options="options" :json="json" :theme="theme" />

使用宣染组件

• 宣染组件：将编辑器组件的JSON渲染到页面上
• options 和 json 与编辑器组件一般是一致的

<vue-uieditor-render :options="options" :json="json" />

开发文档（API）

vue-uieditor 组件属性列表

vue-uieditor-render 组件属性列表

\$this 对像

• 为统一和加强this对像，可以在任何脚本使用 \$this，并建议使用此对像

options: UEOption

• vue-uieditor 组件参数

<vue-uieditor :options="options" />
<vue-uieditor-render :options="options" />

options: UEOption = UERender.DefineOption({
  mixins:[{
    data(){
      return {
        text:'hello'
      };
    },
    created(){

    }
  }],
  templates: [
      {
        title: "JSON Object",
        group: "测试模板库/测试模板",
        json: {
          type: "uieditor-div"
        },
      },
      {
        title: "Tmpl",
        group: "测试模板库/测试模板",
        template: `<template>
	<uieditor-div>
	</uieditor-div>
</template>`,
      },
    ],
    async extraLib(){
      return `const text:string;`
    },
    global(){
      return {
        _:lodash
      };
    },
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: 'Div 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});

成员变量列表

templates: UETemplate

• 设置模板到编辑器左边树

options: UEOption = UERender.DefineOption({
  ...,
  templates: [
      {
        title: "JSON Object",
        group: "测试模板库/测试模板",
        json: {
          type: "uieditor-div"
        },
      },
      {
        title: "Tmpl",
        group: "测试模板库/测试模板",
        template: `<template>
	<uieditor-div>
	</uieditor-div>
</template>`,
      },
    ]
});

成员变量列表

theme: UETheme

• 组件主题

<vue-uieditor :theme="theme" />

theme: UETheme = {
  modes: ["json", "script", "tmpl"],
  toolBar: [
    {
      title: "测试",
      click: ({ service }) => {
        this.json = service.getJson();
        console.log('json', JSON.stringify(json));
      },
    }
  ],
  contextmenus({ render, service }) {
    return [
      {
        title: "测 试",
        disabled: !render,
        click: (item) => {
          console.log(
            JSON.stringify(service.getJson(false, render) || {});
          );
        },
      },
    ];
  }
};

成员变量列表

toolBar: UEToolBar

• 顶部工具栏

theme: UETheme = {
  ...,
  toolBar: [
    {
      title: "测试",
      click: ({ service }) => {
        this.json = service.getJson();
        console.log('json', JSON.stringify(json));
      },
    }
  ]
};

成员变量列表

leftBar / rightBar: UESideBar

• 则边工具栏

theme: UETheme = {
  ...,
  leftBar: {
    show:true,
    filter({item}){ return item.name.indexOf('text') >= 0; }
  }
};

成员变量列表

特殊组件属性

• 限制组件编辑行为操作属性

/** 标记为不能选择 */
const UECanNotSelectProps = 'ue-cant-select';
/** 标记为不能移动 */
const UECanNotMoveProps = 'ue-cant-move';
/** 标记为不能删除 */
const UECanNotRemoveProps = 'ue-cant-remove';
/** 标记为不能复制 */
const UECanNotCopyProps = 'ue-cant-copy';
/** 标记为不能选择子节点 */
const UECanNotSelectChildProps = 'ue-cant-select-child';
/** 标记为不能移动子节点 */
const UECanNotMoveChildProps = 'ue-cant-move-child';
/** 标记为不能删除子节点 */
const UECanNotRemoveChildProps = 'ue-cant-remove-child';
/** 标记为不能复制子节点 */
const UECanNotCopyChildProps = 'ue-cant-copy-child';
/** 标记为不能移入子节点 */
const UECanNotMoveInProps = 'ue-cant-movein';
/** 标记为不能移出子节点 */
const UECanNotMoveOutProps = 'ue-cant-moveout';
/** 标记节点是否锁定 */
const UEIsLockProps = 'ue-is-lock';
/** 标记节点是否折叠 */
const UEIsCollapseProps = 'ue-is-collapse';

transfer: UETransfer

• 转换器，定义json的渲染行为 和 定义组件在编辑时的行为属性

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: 'Div 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});

成员变量列表

editor: UETransferEditor

• 组件编辑时属性与行为特性

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: 'Div 块级标签',
          order: 0,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-template-1',
          container: true
        }
      }
    })
});

成员变量列表

attrs: UETransferEditorAttrs

• 组件编辑时属性与行为特性

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-img': {
        "editor": {
          text: "Image 图片",
          order: 2,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-picture',
          inline: true,
          attrs: {
            src: {
              order: 0,
              value: './vue-uieditor/assets/images/demo.png',
              effect: true,
            },
            style: { value: 'min-width:30px;min-height:30px' }
          }
        }
      }
    })
});

成员变量列表

service: UEService

• 组件编辑时属性与行为特性

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: "Div",
          order: 2,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-picture',
          inline: true,
          transferAttr({ service }) {
            console.log('service', service.getJson())
          }
      }
    })
});

成员变量列表

成员函数列表

setModeUI

• 设置当前模式

setModeUI(mode: UEMode): void;

参数

showMonacoEditorOther

• 显示代码编辑器

showMonacoEditorOther(option: MonacoEditorContext): Promise<void>

参数

getTmpl

• 获取模板（html）

getTmpl(): string

setTmpl

• 设置模板（html）

setTmpl(html:string): Promise<void>

参数

getJson

• 获取json

getJson(): string

setJson

• 设置json

getJson(json:string | object): Promise<void>

参数

getScript

• 获取代码(script)

getScript(): string

setScript

• 设置代码

setScript(script:string): Promise<void>

参数

getCurRender

• 获取当前选中节点

getCurRender(): UERenderItem

getRenderItem

• 获取指定ID的节点

getRenderItem(id: string, context?: UERenderItem): UERenderItem

参数

getRenderByType

• 获取指定ID的节点

getRenderByType(type: string, context?: UERenderItem): UERenderItem

参数

getParentRenderItem

• 获取父节点

getParentRenderItem(render: UERenderItem, all?: boolean): UERenderItem

参数

getParentRenderByType

• 根据类型，获取父级节点

getParentRenderByType(render: UERenderItem, type: string): UERenderItem

参数

closest

• 向上查找节点，包涵本身

closest(render: UERenderItem, fn: (render: UERenderItem) => boolean): UERenderItem

参数

empty

• 清空内容

empty(cnf?: boolean): Promise<void>

参数

getRenderTemp

• 获取 render 的临时内容，使用于内容传送

getRenderTemp(id: string, key: string): any
getRenderTemp(render: UERenderItem, key: string): any

参数

getRenderTemp

• 设置 render 的临时内容，使用于内容传送

setRenderTemp(id: string, key: string, value: any): any;
setRenderTemp(render: UERenderItem, key: string, value: any): any;

参数

delCur

• 删除选中节点

delCur(cnf?: boolean, norefresh?: boolean): Promise<void>

参数

deleteWidget

• 删除节点

deleteWidget(parentId: string, id: string, norefresh?: boolean): void

参数

getAttr

• 获取节点属性

getAttr(id: string, key: string): UETransferEditorAttrsItem

参数

setAttr

• 设置节点属性

setAttr(id: string, attr: UETransferEditorAttrsItem, refresh?: boolean): Promise<void>

参数

addAttr

• 添加自定义节点属性

addAttr(id: string, key: string): UETransferEditorAttrsItem;

参数

refresh

• 刷新

refresh(): Promise<any>

setCurrent

• 设置（选中）当前节点

setCurrent(render: UERenderItem): any;
setCurrent(id: string): any;

参数

addByType

• 在指定节点添加（插入）新内容（根据类型）

addByType(type: string, renderId: string, type2: UEDragType2): Promise<void>;

参数

addByJson

• 在指定节点添加（插入）新内容（根据json内容）

addByJson(json: any, renderId: string, type2: UEDragType2): Promise<void>;

参数

addByTmpl

• 在指定节点添加（插入）新内容（根据模板html内容）

addByTmpl(template: string, renderId: string, type2: UEDragType2): Promise<void>;

参数

isLocked

• 节点是否锁定

isLocked(render: UERenderItem): boolean;
isLocked(id: string): boolean;

参数

locked

• 锁定节点

locked(render: UERenderItem, locked: boolean): Promise<any>;
locked(id: string, locked: boolean): Promise<any>;

参数

isCollapse

• 是否折叠节点

isCollapse(render: UERenderItem): boolean;
isCollapse(id: string): boolean;

参数

collapse

• 折叠节点

collapse(render: UERenderItem, isCollapse: boolean): Promise<any>;
collapse(id: string, isCollapse: boolean): Promise<any>;

参数

canRemove

• 是否可以删除

canRemove(render: UERenderItem): boolean;
canRemove(id: string): boolean;

参数

canCopy

• 是否可以复制

canCopy(render: UERenderItem): boolean;
canCopy(id: string): boolean;

参数

canSelect

• 是否可以选中

canSelect(render: UERenderItem): boolean;
canSelect(id: string): boolean;

参数

canMove

• 是否可以移动

canMove(fromId: string, toId: string, type2: UEDragType2): boolean;

参数

move

• 移动节点

move(fromId: string, toId: string, type2: string): Promise<any>;

参数

copyCur

• 复制当前节点

copyCur(): void;

copyCurToNext

• 复制当前节点到后面位置

copyCurToNext(): void;

cutCur

• 剪切当前节点

cutCur(): void;

pasteCur

• 粘贴当前节点

pasteCur(pos?: 'before' | 'after' | 'child', keepCur?: boolean, currentId?: string, focus?: boolean): void;

参数

export class UERender

• UERender 常用方法

options: UEOption = UERender.DefineOption({
    ...,
    transfer:UERender.DefineTransfer({
      'uieditor-div': {
        "editor": {
          text: "Div",
          order: 2,
          groupOrder:0,
          group:'公用组件库/基础组件',
          icon: 'layui-icon layui-icon-picture',
          inline: true,
          transferAttr({ service }) {
            console.log('service', service.getJson())
          }
      }
    })
});

函数列表

AddGlobalTemplates

• 添加公共模板

static AddGlobalTemplates(templates: UETemplate[]): void;

参数

AddGlobalTransfer

• 添加公共 transfer

static AddGlobalTransfer(...transfers: UETransfer[]): void;

参数

DefineOption

• 定义 options

static DefineOption(options: UEOption): UEOption;

参数

DefineTransfer

• 定义 transfer

static DefineTransfer(transfer: UETransfer): UETransfer;

参数