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 值。