页面侧边栏
页面侧边栏（页边栏）本质上是一个可配置的插槽，它允许您向其中添加自定义内容，以实现个性化内容展示，也可以和工具栏实现联动，见工具栏扩展。
AI 聊天助手就是通过页边栏实现的，具体展示效果见AI 聊天助手。
演示视频
页边栏配置
const defaultOptions = {
// 页边栏相关配置
page: {
aside: {
show: [],
extensions: [],
},
},
}配置项说明
page.aside.show
说明：页边栏显示配置，您也可以通过 openAside、closeAside 方法来动态显示或隐藏页面侧边栏。
类型：Array
配置项示例
aside: {
show: ['office', 'plugins'], // 按数组顺序依次显示
},page.aside.extensions
说明：页边栏扩展配置，可通过此配置动态注入个性化页边栏。
类型：Array
配置项
title：String，自定义扩展页边栏的显示名称。key：String，自定义扩展页边栏的唯一标识，是插槽注入的重要依据，不允许和默认分组标识重复。目前不可设置值有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，页边栏的唯一标识符。
返回值：无