简介
Egg-sider 是基于 Egg.js 开发的侧边栏插件，可以快速构建侧边栏面板，并提供自定义组件的能力。本文将详细介绍 egg-sider 的使用方法，帮助开发者快速使用并提高开发效率。
安装
可以通过 npm 安装该包：
npm i egg-sider --save
基本用法
在 Easy.js 中，使用该插件非常简单。只需要在 config/plugin.js 中添加 egg-sider 即可：
exports.sider = {
enable: true,
package: 'egg-sider',
};然后在 config/config.default.js 中添加相应配置：
-- -------------------- ---- -------
------------- - -
----- --
----- -----
----- -------
----- --------
-- -
----- -------
----- -------
----- -----------
--
--最后，在需要显示侧边栏的地方，使用以下代码即可：
<%- app.sider.render('menu', { current: '/home' }) %>其中，第一个参数是要使用的菜单项（在 config.default.js 中配置），第二个参数是当前选中的菜单项。
自定义组件
对于一些特殊需求，我们可以使用自定义组件来扩展侧边栏插件的功能。以下是一个示例：我们想在侧边栏中添加一个用户信息面板。
首先，在 config/config.default.js 中添加如下配置：
-- -------------------- ---- ------- ------------- - - ----- ------ ------- --------- -- ----------------- - - ----- ------- ---------- ------------ ------ --- --
其中，blocks 是要使用的 block 名称（数组形式，可多选），siderUser 是该 block 的配置。接着，在 app/view 下创建一个 UserPanel.vue 的文件，写上相应的模板：
-- -------------------- ---- -------
----------
---- -------------------
---- --------------------
---- -------------------
------
---- -------------------- --------- --------
------
-----------
--------
------ ------- -
------ -
----- -------
--
--
---------最后，在需要显示该 block 的地方，使用以下代码：
<%- app.sider.render('user', { user: { name: '张三', avatar: 'https://example.com/avatar.jpg' } }) %>这样，就可以在侧边栏中显示一个用户信息面板了。
结束语
本文简单介绍了 npm 包 egg-sider 的使用方法，包括基本用法和自定义组件，希望能对开发者提供帮助。如果你有更好的使用经验或者发现了 bug，欢迎与我们分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005734a81e8991b448e95d1