iview-uieditor: IVEW 可视化编辑器

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

iview-uieditor

开源软件地址：

https://gitee.com/days2020/iview-uieditor

开源软件介绍：

IVEW 可视化编辑器(iview-uieditor)

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

安装与使用

安装

yarn add iview-uieditor

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

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

iview-uieditor 引入 css

import 'iview-uieditor/iview-uieditor/assets/css/app.css';

引用 iview-uieditor

import Vue from 'vue';import { IViewUieditor } from 'iview-uieditor';Vue.use(IViewUieditor);

使用编辑器组件

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

使用宣染组件

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

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

开发文档（API）

iview-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...）

iview-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

iview-uieditor 组件参数

<iview-uieditor :options="options" /><iview-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

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	是否可以选中（编辑）
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
movingChild	Function	(p: any) => boolean	拖动时处理，返回true
movingOut	Function	(p: any) => boolean	拖动时处理，返回true
movingIn	Function	(p: any) => boolean	拖动时处理，返回true
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	否

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

MusicPlayer: Android音乐播放器发布时间：2022-03-25

SmartQQ4Eclipse: Eclipse上的SmartQQ插件，防Boss利器，让你可以在eclipse中使用QQ进 ...发布时间：2022-03-25

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

客服电话

电子邮件

iview-uieditor: IVEW 可视化编辑器

开源软件名称：

开源软件地址：

开源软件介绍：

IVEW 可视化编辑器(iview-uieditor)

相关资源

安装与使用

安装

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

iview-uieditor 引入 css

引用 iview-uieditor

使用编辑器组件

使用宣染组件

开发文档（API）

iview-uieditor 组件属性列表

iview-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

参数

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053