import{ax as i,z as a,A as t,b2 as l}from"./chunks/framework.DkLJC2NO.js";const E=JSON.parse('{"title":"Editor组件 slots","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/slots.md","filePath":"api/editor/slots.md"}'),e={name:"api/editor/slots.md"};function n(p,s,h,r,k,o){return t(),a("div",null,[...s[0]||(s[0]=[l(`

Editor组件 slots

详情： 编辑器最顶部区域
默认： 无
示例：

html

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

nav

详情： 编辑器顶部菜单栏
默认： NavMenu.vue
插槽 Props：
- editorService: editorService 实例

WARNING

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

示例：

html

<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.vue
插槽 Props：
- editorService: editorService 实例

WARNING

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

示例：

html

<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插槽，此插槽将失效

示例：

html

<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插槽，此插槽将失效

示例：

html

<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: 页面配置对象
示例：

html

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

详情： 编辑器中间区域底部页面标题悬浮框内容
默认： 页面详细信息
插槽 Props：
- page: 页面配置对象

详情： 页面列表弹出框内容
默认： 页面列表
插槽 Props：
- list: 页面列表

props-panel

详情： 编辑器右侧属性配置
默认： PropsPanel.vue

props-panel-header

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

content-after

详情： 编辑器主要内容区域之后
默认： 无

详情： 编辑器底部区域
默认： 无

empty

详情： 当前没有页面时，编辑器中间区域
默认： AddPageBox.vue
插槽 Props：
- editorService: editorService 实例
示例：

html

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

`,86)])])}const g=i(e,[["render",n]]);export{E as __pageData,g as default};

Editor组件 slots

header

nav

content-before

src-code

sidebar

component-list

component-list-panel-header

component-list-item

layer-panel-header

layer-node-content

layer-node-label

layer-node-tool

code-block-panel-header

code-block-panel-tool

code-block-panel-search

data-source-panel-tool

data-source-panel-search

workspace

stage

workspace-content

page-bar

page-bar-add-button

page-bar-title

page-bar-popover

page-list-popover

props-panel

props-panel-header

content-after

footer

empty

Editor组件 slots ​

header ​

nav ​

content-before ​

src-code ​

sidebar ​

component-list ​

component-list-panel-header ​

component-list-item ​

layer-panel-header ​

layer-node-content ​

layer-node-label ​

layer-node-tool ​

code-block-panel-header ​

code-block-panel-tool ​

code-block-panel-search ​

data-source-panel-tool ​

data-source-panel-search ​

workspace ​

stage ​

workspace-content ​

page-bar ​

page-bar-add-button ​

page-bar-title ​

page-bar-popover ​

page-list-popover ​

props-panel ​

props-panel-header ​

content-after ​

footer ​

empty ​

Editor组件 slots

header

nav

content-before

src-code

sidebar

component-list

component-list-panel-header

component-list-item

layer-panel-header

layer-node-content

layer-node-label

layer-node-tool

code-block-panel-header

code-block-panel-tool

code-block-panel-search

data-source-panel-tool

data-source-panel-search

workspace

stage

workspace-content

page-bar

page-bar-add-button

page-bar-title

page-bar-popover

page-list-popover

props-panel

props-panel-header

content-after

footer

empty