0.5.20 • Published 3 years ago
recursion-menu v0.5.20
基于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地址
0.5.19
3 years ago
0.5.20
3 years ago
0.5.18
3 years ago
0.5.10
3 years ago
0.5.11
3 years ago
0.5.8
3 years ago
0.5.9
3 years ago
0.5.16
3 years ago
0.5.17
3 years ago
0.5.15
3 years ago
0.5.12
3 years ago
0.5.13
3 years ago
0.5.7
3 years ago
0.5.4
3 years ago
0.5.3
3 years ago
0.5.6
3 years ago
0.5.5
3 years ago
0.5.0
3 years ago
0.5.2
3 years ago
0.5.1
3 years ago
0.4.4
3 years ago
0.4.3
3 years ago
0.4.2
3 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.3.0
3 years ago
0.2.0
3 years ago
0.1.0
3 years ago