# 自定义左侧按钮

添加自定义拖拽组件按钮时务必先通过addComponent方法导入拖拽组件规则

内置的左侧菜单 (opens new window)

# 字段说明

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>

更多方法