自定义左侧按钮

添加自定义拖拽组件按钮时务必先通过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>

更多方法