import{Pt as e,dt as t,n,pt as r}from"./chunks/framework.DDIL1KmX.js";var i=JSON.parse(`{"title":"componentListService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/componentListServiceMethods.md","filePath":"api/editor/componentListServiceMethods.md"}`),a={name:`api/editor/componentListServiceMethods.md`};function o(n,i,a,o,s,c){return e(),t(`div`,null,[...i[0]||=[r(`

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();

`,13)]])}var s=n(a,[[`render`,o]]);export{i as __pageData,s as default};

componentListService方法 ​

setList ​

getList ​

resetState ​

destroy ​

componentListService方法

setList

getList

resetState

destroy