页面侧边栏
页面侧边栏(页边栏)本质上是一个可配置的插槽,它允许您向其中添加自定义内容,以实现个性化内容展示,也可以和工具栏实现联动,见工具栏扩展。
AI 聊天助手就是通过页边栏实现的,具体展示效果见AI 聊天助手。
页边栏配置
const defaultOptions = {
// 页边栏相关配置
page: {
aside: {
show: [],
extensions: [],
},
},
}
配置项说明
page.aside.show
说明:页边栏配置,您可以通过 openAside
、closeAside
方法来动态显示或隐藏页面侧边栏。
类型:Object
配置项:
show
:Array
, 可以展示的侧边栏集合,默认展示当前数组的最后一个值对应的面板。extensions
: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,页边栏的唯一标识符。
返回值:无