介绍
@beisen/sidebar 是一个基于 Vue.js 的侧边栏组件。该组件支持根据路由配置自动生成侧边栏菜单，支持多级菜单，也支持自定义菜单。
安装与使用
安装
npm install @beisen/sidebar --save
引入
import Sidebar from '@beisen/sidebar'; import '@beisen/sidebar/lib/sidebar.css'; Vue.use(Sidebar);
使用
-- -------------------- ---- -------
----------
-----
-------- ---------------- -------------- -------------- --
--------------
------
-----------
--------
------ ------- -
------ -
------ -
------- -
-
----- ----
----- -------
----- - ------ ----- ----- ---------------- --
--------- ---
--
--
------ -------- ----- ----------
------ ------ ----
--
--
--
---------配置说明
1. routes
routes 为一个数组，包含了所有的路由信息，如 path, name, meta 等。
其中 children 属性表示子菜单，同样是一个 routes 数组。
2. theme
theme 为主题，支持两个值：'light' 和 'dark'。
3. title
title 为侧边栏标题。
4. meta
meta 为自定义属性。该属性可以用于配置菜单图标、打开方式等。
{
path: '/home',
name: 'home',
meta: { title: '首页', icon: 'el-icon-s-home', target: '_blank' },
},自定义菜单
如果想自定义菜单，可以通过 slot 的方式传入自己的菜单组件。
<sidebar :title="title">
<template #custom-menu>
<!-- 自定义菜单代码 -->
</template>
</sidebar>完整示例
-- -------------------- ---- -------
----------
-----
-------- -------------- ---------------- ---------------
--------- -------------
---- ------- ---
-----------
----------
---- ----------------
--------------
------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------
------ --------
------- -
-
----- ----
----- -------
----- - ------ ----- ----- ---------------- --
--------- -
-
----- -------------
----- ------------
----- - ------ ------------ ----- ----------------- ------- -------- --
--------- -
-
----- ----------------------
----- -----------
----- - ------ ------ ----- --------------------- --
--
-
----- ---------------------
----- ----------
----- - ------ ------ ----- --------------------- --
--
--
--
-
----- --------
----- -------
----- - ------ ----- ----- ------------------ ------- ------- --
--------- -
-
----- -------------------
----- -------------
----- - ------ ------- ----- ---------------------- ------- ------- --
--
-
----- ------------------
----- ------------
----- - ------ ------- ----- ---------------------- ------- ------- --
--
--
--
--
--
--
--
--
--
---------总结
@beisen/sidebar 是一个基于 Vue.js 的侧边栏组件，支持根据路由配置自动生成侧边栏菜单，并且支持多级菜单和自定义菜单。本文从安装、使用、配置、自定义菜单和示例等方面详细介绍了该组件，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b40