tmagic-editor/docs/api/editor/slots.md

Editor组件 slots

header

• 详情： 编辑器最顶部区域

• 默认： 无

• 示例：

<template>
  <m-editor>
    <template #header>
      <div class="custom-header">自定义头部内容</div>
    </template>
  </m-editor>
</template>

nav

• 详情： 编辑器顶部菜单栏

• 默认： NavMenu.vue

• 插槽 Props：

  • editorService: editorService 实例

:::warning 属性配置menu由默认组件接收，如设置该slot，menu配置将失效 :::

• 示例：

<template>
  <m-editor>
    <template #nav="{ editorService }">
      <div class="custom-nav">
        <button @click="save">保存</button>
      </div>
    </template>
  </m-editor>
</template>

content-before

• 详情： 编辑器主要内容区域之前

• 默认： 无

src-code

• 详情： 源码查看区域

• 默认： 默认的代码编辑器

• 插槽 Props：

  • editorService: editorService 实例

sidebar

• 详情： 左边栏

• 默认： Sidebar.vue

• 插槽 Props：

  • editorService: editorService 实例

:::warning 属性配置sidebar由默认组件接收，如设置该slot，sidebar配置将失效 :::

• 示例：

<template>
  <m-editor>
    <template #sidebar="{ editorService }">
      <div class="custom-sidebar">
        <!-- 自定义侧边栏内容 -->
      </div>
    </template>
  </m-editor>
</template>

component-list

• 详情： 左边栏中的组件列表

• 默认： 默认的组件列表

• 插槽 Props：

  • componentGroupList: 组件分组列表

:::warning 如设置了sidebar插槽，此插槽将失效 :::

component-list-panel-header

• 详情： 左边栏中的组件列表内上方位置

• 默认： 无

:::warning 如设置了sidebar插槽，此插槽将失效 :::

component-list-item

• 详情： 左边栏中的组件列表中组件item

• 默认： 图片加文案

• 插槽 Props：

  • component: 组件配置对象

:::warning 如设置了sidebar插槽，此插槽将失效 :::

• 示例：

<template>
  <m-editor>
    <template #component-list-item="{ component }">
      <div class="custom-item">
        <span>{{ component.text }}</span>
      </div>
    </template>
  </m-editor>
</template>

layer-panel-header

• 详情： 左边栏中的已选组件（组件树）内顶部位置

• 默认： 无

:::warning 如设置了sidebar插槽，此插槽将失效 :::

layer-node-content

• 详情： 左边栏中的已选组件（组件树）节点完整内容

• 默认： 组件名称加id和工具按钮

• 插槽 Props：

  • data: 节点数据

:::warning 如设置了sidebar插槽，此插槽将失效 :::

layer-node-label

• 详情： 左边栏中的已选组件（组件树）节点标签部分

• 默认： 组件名称加id

• 插槽 Props：

  • data: 节点数据

:::warning 如设置了sidebar插槽，此插槽将失效 :::

• 示例：

<template>
  <m-editor>
    <template #layer-node-label="{ data }">
      <span>{{ data.type }} - {{ data.name }}</span>
    </template>
  </m-editor>
</template>

layer-node-tool

• 详情： 左边栏中的已选组件（组件树）节点右侧工具区域

• 默认： 无

• 插槽 Props：

  • data: 节点数据

:::warning 如设置了sidebar插槽，此插槽将失效 :::

code-block-panel-header

• 详情： 左边栏中的代码块列表内顶部位置

• 默认： 无

:::warning 如设置了sidebar插槽，此插槽将失效 :::

code-block-panel-tool

• 详情： 左边栏中的代码块列表中代码块右侧位置

• 默认： 无

• 插槽 Props：

  • id: 代码块id
  • data: 代码块数据

:::warning 如设置了sidebar插槽，此插槽将失效 :::

code-block-panel-search

• 详情： 左边栏中的代码块列表搜索框位置

• 默认： 无

:::warning 如设置了sidebar插槽，此插槽将失效 :::

data-source-panel-tool

• 详情： 左边栏中的数据源列表中数据源右侧位置

• 默认： 无

• 插槽 Props：

  • data: 数据源数据

:::warning 如设置了sidebar插槽，此插槽将失效 :::

data-source-panel-search

• 详情： 左边栏中的数据源列表搜索框位置

• 默认： 无

:::warning 如设置了sidebar插槽，此插槽将失效 :::

workspace

• 详情： 编辑器中间区域

• 默认： Workspace.vue

• 插槽 Props：

  • editorService: editorService 实例

stage

• 详情： 画布

• 默认： Stage.vue

workspace-content

• 详情： 编辑器中间区域内，画布上方位置

• 默认： 无

• 插槽 Props：

  • editorService: editorService 实例

page-bar

• 详情： 编辑器中间区域底部页面标签栏

• 默认： 默认的页面标签栏

page-bar-add-button

• 详情： 页面标签栏中的"添加页面"按钮

• 默认： 默认的添加按钮

page-bar-title

• 详情： 编辑器中间区域底部页面标题

• 默认： 页面名称

• 插槽 Props：

  • page: 页面配置对象

• 示例：

<template>
  <m-editor>
    <template #page-bar-title="{ page }">
      <span>{{ page.name }} - {{ page.id }}</span>
    </template>
  </m-editor>
</template>

page-bar-popover

• 详情： 编辑器中间区域底部页面标题悬浮框内容

• 默认： 页面详细信息

• 插槽 Props：

  • page: 页面配置对象

page-list-popover

• 详情： 页面列表弹出框内容

• 默认： 页面列表

• 插槽 Props：

  • list: 页面列表

props-panel

• 详情： 编辑器右侧属性配置

• 默认： PropsPanel.vue

props-panel-header

• 详情： 编辑器右侧属性配置内顶部区域

• 默认： 无

content-after

• 详情： 编辑器主要内容区域之后

• 默认： 无

footer

• 详情： 编辑器底部区域

• 默认： 无

empty

• 详情： 当前没有页面时，编辑器中间区域

• 默认： AddPageBox.vue

• 插槽 Props：

  • editorService: editorService 实例

• 示例：

<template>
  <m-editor>
    <template #empty="{ editorService }">
      <div class="custom-empty">
        <p>暂无页面</p>
        <button @click="createFirstPage">创建第一个页面</button>
      </div>
    </template>
  </m-editor>
</template>