componentListService方法

setList

• 参数：

  • {ComponentGroup[]} componentGroupList 组件列表配置
  查看 ComponentGroup 及关联类型定义

  export interface ComponentGroup {
    /** 显示文案 */
    title: string;
    /** 组内列表 */
    items: ComponentItem[];
  }

  export interface ComponentItem {
    /** 显示文案 */
    text: string;
    /** 详情，用于tooltip */
    desc?: string;
    /** 组件类型 */
    type: string;
    /** Vue组件或url */
    icon?: string | Component<{}, {}, any>;
    /** 新增组件时需要透传到组价节点上的数据 */
    data?: {
      [key: string]: any;
    };
  }

• 返回：

  • {void}

• 详情：

  设置左侧面板的组件列表配置

  TIP

  该方法通常由编辑器内部调用，开发者可以通过 m-editor 的 componentGroupList prop 来配置组件列表

• 示例：

import { componentListService } from '@tmagic/editor';

componentListService.setList([
  {
    title: '基础组件',
    items: [
      {
        icon: 'text-icon',
        text: '文本',
        type: 'text',
      },
      {
        icon: 'button-icon',
        text: '按钮',
        type: 'button',
      },
    ],
  },
]);

getList

• 参数： 无

• 返回：

  • {ComponentGroup[]} 组件列表配置

• 详情：

  获取当前的组件列表配置

• 示例：

import { componentListService } from '@tmagic/editor';

const list = componentListService.getList();
console.log(list);

resetState

• 参数： 无

• 返回：

  • {void}

• 详情：

  重置组件列表状态，清空所有配置

• 示例：

import { componentListService } from '@tmagic/editor';

componentListService.resetState();

destroy

• 参数： 无

• 返回：

  • {void}

• 详情：

  销毁 componentListService，清空状态并移除所有事件监听和插件

• 示例：

import { componentListService } from '@tmagic/editor';

componentListService.destroy();