enn-sidebar-vue3

Sidebar-Vue3

侧边栏组件 for Vue3

调试

• npm run dev

发包

• lib 为发包后的文件夹

示例

<template>
  <Sidebar
    :top="52"
    :menus="menus"
    router
    footerInfo="@foot"
  />
</template>

<script>
import Sidebar from "enn-sidebar-vue3";

export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      menus: [
        {
          icon: 'el-icon-box',
          title: 'test href 0',
          href: 'https://www.baidu.com/0',
          abbreviation: 'test',
        },
        {
          icon: 'el-icon-s-custom',
          index: '/user-manage',
          title: '用户管理',
          subs: [
            {
              index: 'index',
              title: 'test href',
              href: 'https://www.baidu.com'
            },
            {
              index: '/user/list',
              title: '账户管理',
              subs: [
                {
                  index: '/user/center',
                  title: '个人中心',
                },
              ],
            },
            {
              index: '/department/list',
              title: '组织管理',
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
</style>

Tips

• 外面包裹 el-aside，单层侧边栏设置 width="200px"，双层侧边栏设置 width="245px"
• top 根据 导航栏 的高度进行设置

<el-aside width="200px">
  <Sidebar :top="52" :menus="menus" router footerInfo="@foot" />
</el-aside>
<el-aside width="245px">
  <Sidebar :top="52" :menus="doubleMenus" use-double router />
</el-aside>

API

Sidebar Attributes

参数	类型	必填	默认值	说明
mode	string		hash	路由的模式 hash or hsitory
router	boolean		false	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
menus	Array	是		渲染侧边栏的数据，注意每一项都需要 index
footerInfo	string			底部信息文案
useDouble	boolean		false	是否使用双层侧边栏模式
sideRouter	boolean		false	双层侧边栏时，第一层侧边栏的 router 模式下
showTitle	boolean		false	双层侧边栏模式下 hover 是否展示 title
top	number		0	距离顶部的高度 top
routePropUrls	Object			设置路由传参的地址与其侧边栏激活状态的映射地址，保证侧边栏不会失去焦点。

Tips

• routePropUrls 如 /node/detail/:id 需要激活 /node/list 对应侧边栏的激活状态。传入 :routePropUrls="{'/node/detail/': '/node/list'}"。注意，其中 :id 不需要
  • routePropUrls 如果传入 '/detail/': '/list', 则会匹配所有的 /detail/:id 到 /list 下。如 /detail/1 -> /list
  • routePropUrls 如果传入 '/detail/*': '/list', 则会匹配所有的 /detail/.* 到 /list 下。如 /detail/test/a/1 -> /list
  • 注意：映射的地址要和侧边栏数据完全一致，包括结尾是否有/都需要一致.

menus Attributes

参数	类型	必填	默认值	说明
icon	string			icon 的类名
iconUrl	string			icon 位置图片的地址
index	string			唯一标志，路由跳转的地址，以及激活状态的标志。
title	string			标题，在双层侧边栏的首层中会作为 hover 的提示
abbreviation	string			标题简称，用于渲染双层侧边栏首层的标题，最好是两个字
subs	Array			子菜单
activeRule	string			微应用的基础路径 activeRule
mode	string		hash	微应用的路由模式 hash or history
key	string			使用 href 或 handler 且没有 index 时为必填项
href	string			window.open 的跳转地址，需要时完整的路径
_self	boolean			当为 true 时，href 改为使用 window.location.href = href; 进行跳转
handler	Function			项点击事件的回调函数，参数为当前项的数据，返回 true 时，阻止 default-active 状态改变
disabled	boolean			是否禁用当前项

Tips

• icon 存在时设置 iconUrl 不生效。还是展示 icon 的内容。
• 注意：在使用 href 或 handler 时必须设置 key 保证侧边栏的激活状态正确。key 为当前项的 actived 值。