基于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访问