开发文档Umo Editor Next页面侧边栏

页面侧边栏

页面侧边栏(页边栏)本质上是一个可配置的插槽,它允许您向其中添加自定义内容,以实现个性化内容展示,也可以和工具栏实现联动,见工具栏扩展

AI 聊天助手就是通过页边栏实现的,具体展示效果见AI 聊天助手

页边栏配置

const defaultOptions = {
  // 页边栏相关配置
  page: {
    aside: {
      show: [], 
      extensions: [],
    },
  },
}

配置项说明

page.aside.show

说明:页边栏配置,您可以通过 openAsidecloseAside 方法来动态显示或隐藏页面侧边栏。

类型Object

配置项

  • showArray, 可以展示的侧边栏集合,默认展示当前数组的最后一个值对应的面板。
  • extensionsArray, 侧边栏扩展配置,可通过此配置动态注入个性化侧边栏。

配置项示例

aside: {
  show: ['office', 'plugins'], // 按数组顺序依次显示
},

page.aside.extensions

说明:页边栏扩展配置,可通过此配置动态注入个性化页边栏。

类型Array

配置项

  • titleString,自定义扩展页边栏的显示名称。
  • keyString,自定义扩展页边栏的唯一标识,是插槽注入的重要依据,不允许和默认分组标识重复。目前不可设置值有 chatPage 等。

配置项示例

aside: {
  extensions: [
    // 数组中的每一项代表一个新的分组
    { title: '办公助手', key: 'office' },
    { title: '扩展插件', key: 'plugins' },
  ],
},

插槽配置项

插槽设置和标准的工具栏插槽格式相同,其中标识为#page_aside_{key} 依据扩展配置项中key值来处理。

插槽示例

<template #page_aside_office="props">
  <span>page_aside_office slot:{{ props }}</span>
</template>
<template #page_aside_plugins="props">
  <span>page_aside_plugins slot:{{ props }}</span>
</template>

页边栏插槽

通过具名插槽,向页边栏插入自定义内容。

<template>
  <umo-editor v-bind="options">
    <template #page_aside_office="props">
      <span>page_aside_office slot:{{ props }}</span>
    </template>
    <template #page_aside_plugins="props">
      <span>page_aside_plugins slot:{{ props }}</span>
    </template>
  </umo-editor>
</template>
 
<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';
 
  const options = ref({
    // 配置项
    // ...
    page: {
      aside: {
        show: ['office', 'plugins'],
        extensions: [
          { title: '办公助手', key: 'office' },
          { title: '扩展插件', key: 'plugins' },
        ],
      },
    },
  });
</script>

方法列表

openAside

说明:根据页边栏标识展开页边栏面板。

参数extensions[].key,String,页边栏的唯一标识符。

返回值:无

closeAside

说明:根据标识关闭页边栏面板。

参数extensions[].key,String,页边栏的唯一标识符。

返回值:无