代码拉取完成,页面将自动刷新
id
: String
| Array
name
: String
eventTypes
: Array
组件拥有的事件
id
事件idname
显示名称slots
: Array
插槽
slot
vue中的slotname
显示名称selector
css选择器 {
slot: 'default',
name: '卡片内容',
selector: '.ivu-card>.ivu-card-body',
}
type
Array
自定义分类,可以为后续一些功能使用,例如 'input' 'button'props
Object
属性配置
Object
string
| array
| object
编辑器
select
| text
| boolean
| number
| icon
props = {
type: {
label: '类型',
editors: {
type: 'select',
props: {
items: createItems(`text,password,textarea,url,email,date,number,tel`),
},
},
help: `输入框类型,可选值为 <code>text</code> <code>password</code>
<code>textarea</code> <code>url</code> <code>email</code>
<code>date</code> <code>number</code> <code>tel</code>`,
},
placeholder: {
label: '占位文本 ',
editors: 'text',
},
rows: {
label: '默认行数',
editors: 'number?min=1&max=10',
advanced: true,
},
enterButton: {
label: '搜索按钮',
editors: [{
name: '是否启用',
type: 'boolean',
}, {
name: '按钮文本',
type: 'text',
}],
advanced: true,
},
}
onDrop
function
拖拽被放置时触发的事件,返回false阻止放置。简单说当前被拖拽的组件允许被放置到什么地方
onDragover
function
拖拽中触发的事件,是否运行放置返回false阻止拖拽。简单说就是当前节点下允许放置什么组件
- 参数
- dropData 被拖拽的数据
- targetNode 目标节点
- pos 位置 't' | 'r' | 'l' | 'b' | 'inner'注册扩展
Designer.registerExtension('registerView', function() {
});
注册视图组件
Designer.registerView('ExplorerView', {...});
获取已注册的视图
<template>
<ExplorerView></ExplorerView>
</template>
<script>
let ExplorerView = Designer.getView('ExplorerView');
export default{
components:{ExplorerView}
}
</script>
content
String
vue文件内容editorOptions
: 编辑器选项
showRuler
Boolean
是否显示像素刻度尺wrapperStyle
Object
编辑器包裹样式,用来模拟body样式showStructure
Boolean
是否显示右侧元素结构视图beforeSelectNode
Function
通过鼠标事件在编辑器选中节点之前的事件,返回值false时不可选中onDragover
Function
拖拽中判断是否允许放置组件管理器
components
Array
组件选项
id
分组idtitle
分组标题
id
组件idtitle
组件标题node
模板<template>
<Designer>
<template #left>
<ExplorerView :components="components"></ExplorerView>
</template>
</Designer>
</template>
<script>
export default {
data(){
return {
components:[{
id:'1',
title: '分组1',
children:[{
id:'1-1',
title:'输入框',
node:'<i-input/>'//任意单节点的合法vue片段
}]
}]
}
}
}
</script>
面板
groups
Array
分组
title
String
标题<template>
<Designer>
<template #left>
<ExplorerView :components="components"></ExplorerView>
</template>
<template #right>
<PanelView id="childPanelView" title="组件选项" :groups="groups1"></PanelView>
<PanelView id="pagePanelView" title="页面选项" :groups="groups2"></PanelView>
</template>
</Designer>
</template>
<script>
export default {
data(){
return {
components:[{
id:'1',
title: '分组1',
children:[{
id:'1-1',
title:'输入框',
node:'<i-input/>'//任意单节点的合法vue片段
}]
}],
groups1: [
{
title: '选项',
panels: ['TextPanel', 'PropsPanel', 'OptionEditorPanel'],
},
],
groups2: [
{
title: 'data',
panels: ['DataPanel'],
},
],
}
}
}
</script>
[
{
icon: 'md-add',
handler() {
this.editData();
},
},
]
对应vue中的data属性,
DataPanel
对应vue中的computed属性
ComputedPanel
对应vue中的watch属性
WatchPanel
对应vue中的methods属性
MethodPanel
vNode的prop设置
PropsPanel
vNode的事件设置
EventPanel
vNode的directive设置
DirectivePanel
vNode的内联样式设置
StylePanel
文本节点设置
TextPanel
为下拉框、单选框等包含选项的组件提供的选项编辑器
OptionEditorPanel
optionEditor
tag
string
选项标签getData
Function
获取选项内容setData
Function
设置选项内容export default {
optionEditor: {
tag: 'i-option',
getData(node) {
return {
value: node.getAttr('value'),
label: node.getAttr('label') || node.getText(),
};
},
setData(node, data) {
node.setAttr('value', data.value);
if (node.hasAttr('label')) {
node.setAttr('label', data.label);
}else{
node.replaceText(data.label)
}
},
},
}
为一组模板组合类组件的提供快速配置功能
ComboPanel
例如FormItem下面有一个Input,我们希望在进行操作时是操作这一整个组合,无需单独选中每个节点进行设置
<template>
<FormItem prop="name">
<Input v-model="formData.name"></Input>
</FormItem>
</template>
Designer.registerComboTemplate({
id: 'FormItem',
name: '表单项',
template:`<form-item key="formItem">
<type.input key="input" allowChildren="true"/>
</form-item>`,
configs() {
return [
{
node: 'formItem',
mode: 'prop',
props: {
name: 'prop',
label: '字段名',
},
on: {
'on-change'(combo, data, vucAst) {
let input = combo.nodeMap.input;
let model = input.closest('i-form').getDynamicAttr('model');
let expr = '';
if (data.value) {
expr = [model, data.value].join('.');
}
input.setDirective({
name: 'model',
value: expr,
});
vucAst.addChildData(model, {
id: data.value,
name: '',
code: 'null',
});
},
},
},
{
node: 'input',
mode: 'prop',
props: {
name: 'size',
label: '尺寸',
},
},
{
node: 'input',
mode: 'optionEditor',
},
];
},
})
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。