@ssmt-ui/el-sidebar NPM

@ssmt-ui/el-sidebar

基于 Element UI 的侧边栏菜单组件，支持多级菜单、折叠展开等功能。

安装

npm install @ssmt-ui/el-sidebar

使用

<template>
  <el-sidebar
    :menu-data="menuData"
    :active-menu="activeMenu"
    :is-collapse="isCollapse"
    @select="handleSelect"
  />
</template>

<script>
import { ElSidebar } from '@ssmt-ui/el-sidebar';

export default {
  components: {
    ElSidebar
  },
  data() {
    return {
      menuData: [
        {
          title: '首页',
          path: '/home',
          icon: 'el-icon-home'
        },
        {
          title: '系统管理',
          path: '/system',
          icon: 'el-icon-setting',
          children: [
            {
              title: '用户管理',
              path: 'user'
            },
            {
              title: '角色管理',
              path: 'role'
            }
          ]
        }
      ],
      activeMenu: '/home',
      isCollapse: false
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中菜单：', key, keyPath);
    }
  }
};
</script>

Props

参数	说明	类型	默认值
menuData	菜单数据	Array	-
activeMenu	当前激活菜单的 path	string	''
isCollapse	是否水平折叠收起菜单	boolean	false
backgroundColor	菜单的背景色	string	'#545c64'
textColor	菜单的文字颜色	string	'#fff'
activeTextColor	当前激活菜单的文字颜色	string	'#ffd04b'
uniqueOpened	是否只保持一个子菜单的展开	boolean	false
collapseTransition	是否开启折叠动画	boolean	true
mode	模式	string	'vertical'

Events

事件名称	说明	回调参数
select	菜单选中时触发	key: 选中菜单项的 path, keyPath: 选中菜单项的路径数组

menuData 数据结构

interface MenuItem {
  title: string;      // 菜单标题
  path: string;       // 菜单路径
  icon?: string;      // 菜单图标（element-ui 的图标类名）
  children?: MenuItem[]; // 子菜单
}

依赖

Vue 2.6+
Element UI 2.15+

License

MIT

vue element-ui sidebar menu

vue-property-decorator

1.0.0

3 months ago