vue-uieditor

v1.1.1

Published

4 years ago

VUE 可视化编辑器（Vue 2.x）

Downloads

0High
0Medium
0Low

days2020

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

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

安装与使用

安装

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 组件属性列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | options | UEOption | 空 | UEOption 参数 | | json | JSON | 空 | json 内容 | | tmpl | string | 空 | html 内容 | | theme | UETheme | 空 | 主题 | | on-ready | 事件 | ({service:UEService)=>void | 编辑准备好 | | on-change | 事件 | ({service:UEService)=>void | 编辑内容改变 | | on-select | 事件 | (p)=>void; | 选择时 | | on-add-component | 事件 | (p)=>void; | 添加内容，如：拖入组件或模板 | | on-change-mode | 事件 | (p)=>void; | 当前模式改变（design, json...） |

vue-uieditor-render 组件属性列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | options | UEOption | 空 | UEOption 参数 | | json | JSON | 空 | json 内容 | | tmpl | string | 空 | html 内容 | | mixin | vue mixin | 空 | 组合 vue | | query | any | 空 | 可以使用$this.$query获取内容 | | params | any | 空 | 可以使用$this.$params获取内容 |

$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
        }
      }
    })
});

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | mixins | Array | [] | vue 组合，扩展到组件内部，如：组件、指令或方法等 | | templates | UETemplate | [] | 设置模板到编辑器左边树 | | transfer | UETransfer | {} | 转换器，定义json的渲染行为和定义组件在编辑时的行为属性 | | transferBefore | Function | (render: UERenderItem, extend?: UETransferExtend) => UERenderItem | 转换器处理之前 | | transferAfter | Function | (render: UERenderItem, extend?: UETransferExtend) => UERenderItem | 转换器处理之后 | | extraLib | Function | ()=> Promise | 扩展代码智能提示声明 | | http | Function | ()=> object | $http或数据源method配置，参考 | | global | Function | ()=> object | 定义全局变量 | | babel | Boolean | true | 是否开启 babel 在线编译（要加载babel-standalone js），默认为 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>`,
      },
    ]
});

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | title | string | 空 | 标题 | | icon | string | 空 | 图标 | | group | string | 空 | 分组 | | groupOrder | number | 空 | 分组顺序，同分组的第一个groupOrder生效 | | json | string 或 object | 空 | json 模板，可以json字串或json对像 | | template | string | 空 | html 模板，如果有json内容，优先使用json内容 | | moving | Function | (p: any) => boolean | 拖动时处理，返回true|false，决定是否可以拖动到目标 |

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) || {});
          );
        },
      },
    ];
  }
};

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | modes | Array | ['json', 'script', 'tmpl] | 编辑器可用模式：json, script, tmpl | | toolBar | UEToolBar[] | [] | 设置顶部工具栏 | | leftBar | UESideBar | 空 | 左边工具栏（组件与模板） | | rightBar | UESideBar | 空 | 右边工具栏（属性） | | about | Function | ({ service: UEService }): string | 设置关于对话框内容 | | contextmenus | Function | ({ render: UERenderItem; parent: UERenderItem; editor: UETransferEditor; service: UEService; }): UEContextmenuItem[] | 选中组件的添加快捷菜单 |

toolBar: UEToolBar

顶部工具栏

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

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | title | string | 空 | 标题，如有图标，用于tip | | icon | string | 空 | 图标 | | divided | boolean | false | 分离线 | | disabled | boolean | false | 禁用 | | show | boolean | false | 是否显示 | | click | 方法 | (e: any): void | 点击 |

leftBar / rightBar: UESideBar

则边工具栏

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

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | show | boolean | false | 是否显示 | | filter | 方法 | ({item,all,service}): boolean | 过滤 |

特殊组件属性

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


/** 标记为不能选择 */
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
        }
      }
    })
});

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | type | string | 空 | 组件名称 | | editor | UETransferEditor | 空 | 组件编辑时属性与行为特性 | | transfer | Function | (render: UERenderItem, extend?: UETransferExtend): UERenderItem | 渲染时转换 render, 如果返回空不渲染 |

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
        }
      }
    })
});

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | text | string | ((p: { editor: UETransferEditor, attrs: UETransferEditorAttrs }) => string) | 空 | 显示名称, 支持属性变量, 如:%label% | | defaultText | string | 空 | 如果text为空时默认内容 | | icon | string | 空 | 图标 | | json | string | 空 | 默认JSON模板内容 | | template | string | 空 | 默认HTML模板内容 | | order | number | 99 | 排序 | | group | string | 空 | 分组，可用"/"实现分组层级，如：基础库/基础组件 | | groupOrder | number | 99 | 分组排序 | | base | boolean | true | 是否基础组件，编辑时作为独立组件，子孙节点不能选中等操作 | | container | boolean | false | 是否容器，如：div | | containerBorder | boolean | false | 是否显示容器边框，方便编辑时定位 | | controlLeft | boolean | true | 是否在容器左边留空方便选择，容器时默认为 true | | empty | string | 空 | 编辑时使用黑块代替组件显示，处理大型组件占用性能 | | collapse | boolean | true | 是否可以收起，容器时默认为 true | | select | boolean | true | 是否可以选中（编辑） | | selectChild | boolean | true | 是否可以选中子节点（编辑） | | remove | boolean | true | 是否可以删除（编辑） | | removeChild | boolean | true | 是否可以删除子节点（编辑） | | draggable | boolean | true | 是否可以拖动（编辑） | | draggableChild | boolean | true | 是否可以拖动子节点（编辑） | | showInTree | boolean | true | 是否显示在组件树 | | show | boolean | true | 是否显示 | | inline | boolean | true | 编辑时是否强制显示为inline | | className | string | 空 | 编辑时临时添加样式 | | placeholderAttr | boolean | false | 组件是否有placeholder属性 | | disabledAttr | boolean | false | 组件是否有 disabled 属性 | | hideAttrs | string[] | [] | 隐藏已有属性attr，如: ['class'] | | hideAttrGroups | string[] | [] | 隐藏已有属性分组 | | attrs | UETransferEditorAttrs | 空 | 设置组件属性栏 | | coping | Function | (p: { render: UERenderItem; parent: UERenderItem; service: UEService; }) => boolean | 处理是否可以复制，并可以处理复制内容 | | contenting | Function | (p: any) => boolean | 是否可以拖动组件为子节点，容器时才会生产 | | moving | Function | (p: any) => boolean | 拖动时处理，返回true|false，决定是否可以拖动到目标 | | movingChild | Function | (p: any) => boolean | 拖动时处理，返回true|false，决定是否可以移动子节点 | | movingOut | Function | (p: any) => boolean | 拖动时处理，返回true|false，决定是否可以将子节点移出本节点 | | movingIn | Function | (p: any) => boolean | 拖动时处理，返回true|false，决定是否可以移出入节点 | | initAttr | Function | (p: any) => void | 编辑时初始化render.attrs | | transferAttr | Function | (p: any) => void | 编辑渲染时转换 render 和 attr，转换内容会生成到JSON | | transferAttrAfter | Function | (p: any) => void | 编辑渲染时转换 render.attrs 到 render 之后 | | contextmenu | Function | (p: any) => void | 选中对像的快捷菜单 | | toolbar | Function | (p: any) => void | 选中对像的工具栏 |

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' }
          }
        }
      }
    })
});

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | text | string | 空 | 显示名称 | | value | any | 空 | 默认值 | | demoValue | any | 空 | 编辑时代替value，保证组件编辑时的显示效果和防止使用value时出错 | | editValue | any | 空 | 进入高级代码编写时，使用些属性代替 value 属性 | | desc | string | 空 | 描述说明 | | codeBtn | boolean | true | 是否默认代码编辑按钮 | | language | string | javascript | 代码编辑语言，如：javascript,html | | row | boolean | false | 是否占一行 | | group | string | 空 | 分组 | | groupOrder | number | 99 | 分组顺序，同组第一个为准 | | order | number | 99 | 顺序 | | show | boolean | true | 是否显示属性 | | event | boolean | false | 是否事件 | | vue | boolean | false | 是否vue属性 | | effect | boolean | false | 是否在编辑时生效 | | editorOlny | boolean | false | 此属性只使用于编辑器，即最终结果没有此属性 | | type | text, slider, slider-only, select, select-only, boolean, boolean-only, number, custom' | text | 显示类型 | | typeOption | any | 空 | 显示类型的参数，如：type为'slider'时，typeOption={min:1,max:24} | | datas | string[] | 空 | 显示类型数据源，如：type为'select'时，datas=['small', 'large'] | | bind | boolean | false | 是否为bind属性 | | enabledBind | boolean | false | 是否允许修改bind属性 | | editorBind | boolean | false | 编辑是否使用bind，编辑开此项容易报错 | | change | Function | (attr: UETransferEditorAttrsItem, service: UEService) => boolean | 改变时处理，返回false中断 |

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())
          }
      }
    })
});

成员变量列表

| 名称 | 类型 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | | $uieditor | Vue | 空 | 获取当前编辑组件 | | options | UEOption | 空 | 获取当前options | | history | object | 空 | 获取历史记录信息 | | current | object | 空 | 获取当前信息，如果选中id等 | | rootRender | object | 空 | 获取当前JSON root |

成员函数列表

setModeUI

设置当前模式

setModeUI(mode: UEMode): void;

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | mode | design, json, script, tmpl, preview | 是 | design | 模式 |

showMonacoEditorOther

显示代码编辑器

showMonacoEditorOther(option: MonacoEditorContext): Promise<void>

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | option | MonacoEditorContext | 是 | 空 | 选项 |

getTmpl

获取模板（html）

getTmpl(): string

setTmpl

设置模板（html）

setTmpl(html:string): Promise<void>

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | html | string | 是 | 空 | html模板内容 |

getJson

获取json

getJson(): string

setJson

设置json

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | json | string, object | 是 | 空 | json内容 |

getScript

获取代码(script)

getScript(): string

setScript

设置代码

setScript(script:string): Promise<void>

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | script | string | 是 | 空 | 代码内容 |

getCurRender

获取当前选中节点

getCurRender(): UERenderItem

getRenderItem

获取指定ID的节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | ID | | context | UERenderItem | 否 | rootRender | 搜索上下文节点 |

getRenderByType

获取指定ID的节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | type | string | 是 | 空 | 类型 | | context | UERenderItem | 否 | rootRender | 搜索上下文节点 |

getParentRenderItem

获取父节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | all | UERenderItem | 否 | 是 | 是否所有内容，否则根据select设置查找父节点 |

getParentRenderByType

根据类型，获取父级节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | type | string | 是 | 空 | 类型 |

closest

向上查找节点，包涵本身

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | fn | (render: UERenderItem) => boolean | 是 | 空 | 搜索条件，返回true |

empty

清空内容

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | cnf | boolean | 否 | false | 是否提示确认框 |

getRenderTemp

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

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | 节点ID | | render | UERenderItem | 是 | 空 | 节点 | | key | string | 是 | 空 | 内容key |

getRenderTemp

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

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | 节点ID | | render | UERenderItem | 是 | 空 | 节点 | | key | string | 是 | 空 | 内容key | | value | any | 是 | 空 | 内容 |

delCur

删除选中节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | cnf | boolean | 否 | true | 是否提示确认框 | | norefresh | boolean | 否 | false | 是否不刷新 |

deleteWidget

删除节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | parentId | string | 是 | 空 | 父节点ID | | id | string | 是 | 空 | 节点ID | | norefresh | boolean | 否 | false | 是否不刷新 |

getAttr

获取节点属性

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | 节点ID | | key | string | 是 | 空 | 属性key |

setAttr

设置节点属性

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | 节点ID | | attr | UETransferEditorAttrsItem | 是 | 空 | 属性内容 | | refresh | boolean | 否 | 是 | 是否刷新 |

addAttr

添加自定义节点属性

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | 节点ID | | key | string | 是 | 空 | 属性key |

refresh

刷新

refresh(): Promise<any>

setCurrent

设置（选中）当前节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | id | string | 是 | 空 | 节点ID | | render | render | 是 | 空 | 节点 |

addByType

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

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | type | string | 是 | 空 | 节点类型，如：uieditor-div | | renderId | string | 是 | 空 | 节点Id | | type2 | in, before, after | 是 | 空 | 位置 |

addByJson

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

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | json | string, object | 是 | 空 | json内容 | | renderId | string | 是 | 空 | 节点Id | | type2 | in, before, after | 是 | 空 | 位置 |

addByTmpl

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

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | template | string | 是 | 空 | 模板html内容 | | renderId | string | 是 | 空 | 节点Id | | type2 | in, before, after | 是 | 空 | 位置 |

isLocked

节点是否锁定

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id |

locked

锁定节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id | | locked | boolean | 是 | 空 | 是否锁定 |

isCollapse

是否折叠节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id |

collapse

折叠节点

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id | | isCollapse | boolean | 是 | 空 | 是否折叠 |

canRemove

是否可以删除

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id |

canCopy

是否可以复制

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id |

canSelect

是否可以选中

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | render | UERenderItem | 是 | 空 | 节点 | | id | string | 是 | 空 | 节点Id |

canMove

是否可以移动

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | fromId | string | 是 | 空 | 要移动节点Id | | toId | string | 是 | 空 | 移动到节点Id | | type2 | in, before, after | 是 | 空 | 位置 |

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;

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | pos | before, after, child | 否 | 空 | 位置 | | keepCur | boolean | 否 | 空 | 保留当前节点 | | currentId | string | 否 | 空 | 当前节点 | | focus | boolean | 否 | 空 | 粘贴后选中 |

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;

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | templates | UETemplate[] | 是 | 空 | 模板内容 |

AddGlobalTransfer

添加公共 transfer

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

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | transfers | UETemplate[] | 是 | 空 | transfer |

DefineOption

定义 options

static DefineOption(options: UEOption): UEOption;

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | options | UEOption | 是 | 空 | 参数 |

DefineTransfer

定义 transfer

static DefineTransfer(transfer: UETransfer): UETransfer;

参数

| 名称 | 类型 | 是否必选 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | | transfer | UETransfer | 是 | 空 | transfer |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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

相关资源

安装与使用

安装

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

引用 vue-uieditor

使用编辑器组件

使用宣染组件

开发文档（API）

vue-uieditor 组件属性列表

vue-uieditor-render 组件属性列表

$this 对像

options: UEOption

成员变量列表

templates: UETemplate

成员变量列表

theme: UETheme

成员变量列表

toolBar: UEToolBar

成员变量列表

leftBar / rightBar: UESideBar

成员变量列表

特殊组件属性

transfer: UETransfer

成员变量列表

editor: UETransferEditor

成员变量列表

attrs: UETransferEditorAttrs

成员变量列表

service: UEService

成员变量列表

成员函数列表

setModeUI

参数

showMonacoEditorOther

参数

getTmpl

setTmpl

参数

getJson

setJson

参数

getScript

setScript

参数

getCurRender

getRenderItem

参数

getRenderByType

参数

getParentRenderItem

参数

getParentRenderByType

参数

closest

参数

empty

参数

getRenderTemp

参数

getRenderTemp

参数

delCur

参数

deleteWidget

参数

getAttr

参数

setAttr

参数

addAttr

参数

refresh

setCurrent