# 自定义左侧按钮
添加自定义拖拽组件按钮时务必先通过addComponent
方法导入拖拽组件规则
# 字段说明
Menu
字段名 | 说明 | 类型 |
---|---|---|
title | 分组标题 | string |
name | 分组名称 | string |
list | 按钮列表 MenuItem | Array |
MenuItem
字段名 | 说明 | 类型 |
---|---|---|
label | 拖拽组件标题 | string |
name | 拖拽组件名称 | string |
icon | 拖拽组件图标 | string |
内置的三个组件分组name
分别为: main
,aide
,layout
# 示例
重新定义左侧拖拽分组
<template>
<fc-designer ref="designer" :menu="menu"/>
</template>
<script>
export default {
name: 'app',
data() {
return {
menu:[{
title:'分组1',
name:'group1',
list:[{
icon: 'icon-checkbox',
name: 'checkbox',
label: '单选框'
}]
}]
};
},
};
</script>
追加自定义分组
<template>
<fc-designer ref="designer"/>
</template>
<script>
export default {
name: 'app',
data() {
return {};
},
created(){
this.$refs.designer.addMenu({
title:'分组1',
name:'group1',
list:[{
icon: 'icon-checkbox',
name: 'checkbox',
label: '单选框'
}]
});
}
};
</script>
追加自定义拖拽组件
<template>
<fc-designer ref="designer"/>
</template>
<script>
export default {
name: 'app',
data() {
return {};
},
created(){
this.$refs.designer.appendMenuItem({
icon: 'icon-checkbox',
name: 'checkbox',
label: '单选框'
});
}
};
</script>