@hz_yujin/vue2-base-menu

基于 Vue 2.6 / 2.7 + Element UI el-menu 的侧栏菜单薄封装。

组件只负责展示与交互事件，不内置 Vuex / vue-router，由业务侧处理跳转。

安装

npm install @hz_yujin/vue2-base-menu element-ui

注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue2BaseMenu from '@hz_yujin/vue2-base-menu'
import '@hz_yujin/vue2-base-menu/style.css'

Vue.use(ElementUI)
Vue.use(Vue2BaseMenu)

基础用法

<template>
  <pro-menu
    :menus="menus"
    :collapse="collapsed"
    :default-active="activePath"
    :route-path="routePath"
    :props-map="propsMap"
    @select="onSelect"
  />
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      activePath: '/workorder/list',
      routePath: '/workorder/list',
      propsMap: {
        label: 'label',
        path: 'path',
        icon: 'icon',
        children: 'children',
      },
      menus: [
        {
          label: '工单',
          path: '/workorder',
          icon: 'el-icon-s-order',
          children: [
            { label: '工单列表', path: '/workorder/list', icon: 'el-icon-document' },
          ],
        },
      ],
    }
  },
  methods: {
    onSelect(item) {
      // 业务侧自行 router.push / avueRouter
      console.log(item)
    },
  },
}
</script>

Props

| Prop | 类型 | 默认 | 说明 | |------|------|------|------| | menus | Array | [] | 菜单树 | | propsMap | Object | {} | 字段映射 label/path/icon/children/visible | | collapse | Boolean | false | 为 true 时宽度收至 0、不占位（带过渡动画，不是 Element 图标折叠） | | width | Number/String | 220 | 展开宽度 | | duration | Number | 280 | 收起/展开动画时长（毫秒） | | animate | Boolean | true | 是否启用收起/展开动画 | | defaultActive | String | '' | 当前激活 path | | routePath | String | '' | 用于 item.group 激活匹配 | | defaultOpeneds | Array | null | 手动指定展开；不传且 autoOpeneds 时自动计算 | | autoOpeneds | Boolean | true | 自动展开祖先节点 | | uniqueOpened | Boolean | true | 手风琴 | | mode | String | vertical | vertical / horizontal | | roles | String/Array | null | 配合 item.meta.roles 过滤 | | scrollbar | Boolean | true | 使用 el-scrollbar | | emptyText | String | 没有发现菜单 | 空态文案 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | select | (item) | 点击叶子菜单 | | open / close | Element Menu 原样透传 | 子菜单展开/收起 |

工具方法

import {
  resolveMenuProps,
  findParentOpeneds,
  isMenuItemActive,
  isMenuItemVisible,
  isMenuItemAllowed,
} from '@hz_yujin/vue2-base-menu'

在 guilin-cps-ui 中接入提示

1. package.json 增加依赖，vue.config.js 的 transpileDependencies 加入 @hz_yujin/vue2-base-menu
2. main.js 注册插件并引入样式
3. 用 ProMenu 替换 src/page/index/sidebar/，在 @select 中保留原 open 路由逻辑

Vue CLI 3 / webpack 4

若构建报错解析现代语法，请将本包加入 transpileDependencies。