npm:recursion-menu

README

基于vite+vue3+element-plus的递归菜单插件

安装指南

npm install recursion-menu --save

快速上手

  import recursionMenu from "recursion-menu"
  import "recursion-menu/dist/style.css"
  app.use(recursionMenu)

Attributes

|参数|说明|类型|默认值| |:-|:-:|:-:|-:| |data|绑定值|Array|见下面| |collapse|是否水平折叠收起菜单|Boolean|false| |backgroundColor|菜单的背景色|String|#141A3A| |textColor|菜单的文字颜色|String|#141A3A| |activeTextColor|当前激活菜单的文字颜色|String|#409EFF| |uniqueOpened|是否只保持一个子菜单的展开|Boolean|false|

data数据格式

  [
    {
      hidden: true, // 如果设置为 true, 此菜单将不会出现在侧边栏中(默认值为 false)
      alwaysShow: true, // 如果设置为 true, 根菜单将会一直出现在侧边栏中(默认值为 false)
      path: "router-path", // (必填项)
      name: "router-name",
      meta: { 
        title: "title", // (必填项)
        icon: "svg-name", // 菜单图标
        activeMenu: "/menu/test" // 如果设置了路径, 侧边栏将会高亮显示此路径对应的菜单
      }, 
      children: [......]
    },
    ......
  ]

icon如何使用

1: 安装vite-plugin-svg-icons依赖

npm install vite-plugin-svg-icons --save

2: 在vite.config.js文件中，写入如下配置

  import viteSvgIcons from 'vite-plugin-svg-icons'
  ......
  plugins: [
    viteSvgIcons({
      iconDirs: [path.resolve(__dirname, "src/svg")], // 在src文件夹下添加svg(自己定义)文件夹
      symbolId: "icon-[name]"
    })
  ]

3: 然后在项目入口的js文件中，添加一个模块引入

import "vite-plugin-svg-icons/register";

4: 全局引入svg文件

  const svgs = import.meta.glob('./svg/*.svg') // 注意路径
  Object.values(svgs).map(item => item)

gitlab地址

gitlab访问

Usage no npm install needed!