1 Star 0 Fork 24

人多昵称不够用 / vue-uieditor

forked from days2020 / vue-uieditor 
Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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-uieditor';

使用编辑器组件

<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 扩展代码智能提示声明
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

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)
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 是否可以选中(编辑)
draggable 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
movingChild Function (p: any) => boolean 拖动时处理,返回true
transferAttr Function (p: any) => void 编辑渲染时转换 render 和 attr,转换内容会生成到JSON
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>;
参数
名称 类型 是否必选 默认值 描述
fromId string 要移动节点Id
toId string 移动到节点Id
type2 in, before, after 位置

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

Comments ( 0 )

Sign in for post a comment

About

VUE 可视化编辑器 spread retract
TypeScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more
TypeScript
1
https://gitee.com/zhengxs2018/vue-uieditor.git
git@gitee.com:zhengxs2018/vue-uieditor.git
zhengxs2018
vue-uieditor
vue-uieditor
master

Search