基于 VUE 2.x
在线可视化VUE开发,所见即所得
支持 es2015 JS 语法
开发结果不用二次编译,马上可以使用
减轻开发成本,提升项目维护效率
可实现低代码开发
vue-uieditor资源加载,使用 webpack copy
config . plugin ( 'copy-vue-uieditor-assets' ) . use ( CopyWebpackPlugin , [
[ {
from : './node_modules/vue-uieditor/vue-uieditor' ,
to : './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 " />
名称
类型
默认值
描述
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,并建议使用此对像
< 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
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
< 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[]
选中组件的添加快捷菜单
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' ;
转换器,定义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, 如果返回空不渲染
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中断
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 ( mode : UEMode ) : void ;
名称
类型
是否必选
默认值
描述
mode
design, json, script, tmpl, preview
是
design
模式
showMonacoEditorOther ( option : MonacoEditorContext ) : Promise < void >
名称
类型
是否必选
默认值
描述
option
MonacoEditorContext
是
空
选项
setTmpl ( html :string ) : Promise < void >
名称
类型
是否必选
默认值
描述
html
string
是
空
html模板内容
getJson ( json :string | object ) : Promise < void >
名称
类型
是否必选
默认值
描述
json
string, object
是
空
json内容
setScript ( script :string) : Promise < void >
名称
类型
是否必选
默认值
描述
script
string
是
空
代码内容
getCurRender ( ) : UERenderItem
getRenderItem ( id : string , context ?: UERenderItem ) : UERenderItem
名称
类型
是否必选
默认值
描述
id
string
是
空
ID
context
UERenderItem
否
rootRender
搜索上下文节点
getRenderByType ( type : string , context ?: UERenderItem ) : UERenderItem
名称
类型
是否必选
默认值
描述
type
string
是
空
类型
context
UERenderItem
否
rootRender
搜索上下文节点
getParentRenderItem ( render : UERenderItem , all ?: boolean ) : UERenderItem
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
all
UERenderItem
否
是
是否所有内容,否则根据select设置查找父节点
getParentRenderByType ( render : UERenderItem , type : string ) : UERenderItem
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
type
string
是
空
类型
closest ( render : UERenderItem , fn : ( render : UERenderItem ) = > boolean ) : UERenderItem
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
fn
(render: UERenderItem) => boolean
是
空
搜索条件,返回true
empty ( cnf ?: boolean ) : Promise < void >
名称
类型
是否必选
默认值
描述
cnf
boolean
否
false
是否提示确认框
getRenderTemp ( id : string , key : string ) : any
getRenderTemp ( render : UERenderItem , key : string ) : any
名称
类型
是否必选
默认值
描述
id
string
是
空
节点ID
render
UERenderItem
是
空
节点
key
string
是
空
内容key
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 ( cnf ?: boolean , norefresh ?: boolean) : Promise < void >
名称
类型
是否必选
默认值
描述
cnf
boolean
否
true
是否提示确认框
norefresh
boolean
否
false
是否不刷新
deleteWidget ( parentId : string, id : string , norefresh ?: boolean) : void
名称
类型
是否必选
默认值
描述
parentId
string
是
空
父节点ID
id
string
是
空
节点ID
norefresh
boolean
否
false
是否不刷新
getAttr ( id : string , key : string ) : UETransferEditorAttrsItem
名称
类型
是否必选
默认值
描述
id
string
是
空
节点ID
key
string
是
空
属性key
setAttr ( id : string , attr : UETransferEditorAttrsItem , refresh ?: boolean ) : Promise < void >
名称
类型
是否必选
默认值
描述
id
string
是
空
节点ID
attr
UETransferEditorAttrsItem
是
空
属性内容
refresh
boolean
否
是
是否刷新
addAttr ( id : string , key : string ) : UETransferEditorAttrsItem ;
名称
类型
是否必选
默认值
描述
id
string
是
空
节点ID
key
string
是
空
属性key
setCurrent ( render : UERenderItem ) : any;
setCurrent ( id : string ) : any;
名称
类型
是否必选
默认值
描述
id
string
是
空
节点ID
render
render
是
空
节点
addByType ( type : string , renderId : string, type2 : UEDragType2 ) : Promise < void > ;
名称
类型
是否必选
默认值
描述
type
string
是
空
节点类型,如:uieditor-div
renderId
string
是
空
节点Id
type2
in, before, after
是
空
位置
addByJson ( json : any, renderId : string, type2 : UEDragType2 ) : Promise < void > ;
名称
类型
是否必选
默认值
描述
json
string, object
是
空
json内容
renderId
string
是
空
节点Id
type2
in, before, after
是
空
位置
在指定节点添加(插入)新内容(根据模板html内容)
addByTmpl ( template : string, renderId : string, type2 : UEDragType2 ) : Promise < void > ;
名称
类型
是否必选
默认值
描述
template
string
是
空
模板html内容
renderId
string
是
空
节点Id
type2
in, before, after
是
空
位置
isLocked ( render : UERenderItem ) : boolean;
isLocked ( id : string ) : boolean;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
locked ( render : UERenderItem , locked : boolean ) : Promise < any > ;
locked ( id : string , locked : boolean ) : Promise < any > ;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
locked
boolean
是
空
是否锁定
isCollapse ( render : UERenderItem ) : boolean;
isCollapse ( id : string ) : boolean;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
collapse ( render : UERenderItem , isCollapse : boolean) : Promise < any > ;
collapse ( id : string , isCollapse : boolean) : Promise < any > ;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
isCollapse
boolean
是
空
是否折叠
canRemove ( render : UERenderItem ) : boolean;
canRemove ( id : string ) : boolean;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
canCopy ( render : UERenderItem ) : boolean;
canCopy ( id : string ) : boolean;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
canSelect ( render : UERenderItem ) : boolean;
canSelect ( id : string ) : boolean;
名称
类型
是否必选
默认值
描述
render
UERenderItem
是
空
节点
id
string
是
空
节点Id
canMove ( fromId : string , toId : string , type2 : UEDragType2 ) : boolean;
名称
类型
是否必选
默认值
描述
fromId
string
是
空
要移动节点Id
toId
string
是
空
移动到节点Id
type2
in, before, after
是
空
位置
move ( fromId : string , toId : string , type2 : string ) : Promise < any > ;
名称
类型
是否必选
默认值
描述
fromId
string
是
空
要移动节点Id
toId
string
是
空
移动到节点Id
type2
in, before, after
是
空
位置
pasteCur ( pos ?: 'before' | 'after' | 'child' , keepCur ?: boolean , currentId ?: string, focus ?: boolean ) : void ;
名称
类型
是否必选
默认值
描述
pos
before, after, child
否
空
位置
keepCur
boolean
否
空
保留当前节点
currentId
string
否
空
当前节点
focus
boolean
否
空
粘贴后选中
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 ( ) )
}
}
} )
} ) ;
static AddGlobalTemplates ( templates : UETemplate [ ] ) : void ;
名称
类型
是否必选
默认值
描述
templates
UETemplate[]
是
空
模板内容
static AddGlobalTransfer ( ...transfers : UETransfer [ ] ) : void ;
名称
类型
是否必选
默认值
描述
transfers
UETemplate[]
是
空
transfer
static DefineOption ( options : UEOption ) : UEOption ;
名称
类型
是否必选
默认值
描述
options
UEOption
是
空
参数
static DefineTransfer ( transfer : UETransfer ) : UETransfer ;
名称
类型
是否必选
默认值
描述
transfer
UETransfer
是
空
transfer