vue3版本 | vue2版本
clone项目后npm run preview即可
npm i vue-ele-nav-plus
// 需要安装前置依赖组件,已安装请忽略
npm i vue-router
npm i element-plus
// 开启国际化需要安装组件,已安装请忽略
npm i vue-i18n
import vueEleNavPlus from "vue-ele-nav-plus";
import "vue-ele-nav-plus/index.css";
app.use(vueEleNavPlus);
当前dom层级的vue-ele-nav-plus-box中!!!
-
--ele-nav-menu-height
:60px;-->嵌入DOM中的菜单高度 -
--ele-nav-text
:#303133;-->菜单字体颜色 -
--ele-nav-bg
:#fff;-->一级菜单背景色 -
--ele-nav-menu-bg2
:transparent;-->二级菜单背景色,建议使用菜单背景色less函数计算darken(x, 3%) -
--ele-nav-menu-bg3
:transparent;-->三级菜单背景色,建议使用菜单背景色less函数计算darken(x, 6%) -
--ele-nav-menu-bg4
:transparent;-->四级菜单背景色,建议使用菜单背景色less函数计算darken(x, 9%) -
--ele-nav-menu-bg-hover
:#fef5e6;-->触摸菜单颜色,建议使用菜单背景色less函数计算lighten(x, 5%) -
--ele-nav-menu-active
:var(--el-color-primary);-->点亮菜单颜色,默认取element主色 -
--ele-nav-colla-bg
:rgba(255, 255, 255, .2);-->收缩按钮背景色
body中的vue-ele-nav-plus-poper中!!!
-
--ele-nav-menu-second-height
:40px;-->浮窗菜单高度 -
--ele-nav-text
:#303133;-->浮窗菜单字体颜色 -
--ele-nav-menu-bg2
:transparent;-->二级菜单背景色,建议使用菜单背景色less函数计算darken(x, 3%) -
--ele-nav-menu-bg3
:transparent;-->三级菜单背景色,建议使用菜单背景色less函数计算darken(x, 6%) -
--ele-nav-menu-bg4
:transparent;-->四级菜单背景色,建议使用菜单背景色less函数计算darken(x, 9%) -
--ele-nav-menu-bg-hover
:#fef5e6;-->触摸菜单颜色,建议使用菜单背景色less函数计算lighten(x, 5%) -
--ele-nav-menu-active
:var(--el-color-primary);-->点亮菜单颜色,默认取element主色
-
menu
:要显示的菜单数据-->Array;非必传;默认*[]*
// 配置项说明
{
"name":'' // 菜单唯一值,对应路由的name,点击触发跳转时会跳转该name
"icon":{ // 菜单图标
"attrs":{},
"type":'',
"icon":''
}
//
// attrs的值会v-bind到对应dom上
// type的值,有以下四种情况:
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容
//
"title":'' // 普通菜单名或i18n对应的key
"link":'' // 如果是外链菜单的话,传入跳转地址,点击后会刷新当前页面并打开新窗口打开该地址
"children":[] // 子菜单,从顶层开始最深支持4层,有子集时父级是无法触发点击(跳转)事件的
}
// 菜单激活颜色说明
有激活状态的路由,必须能找到对应或代点亮的菜单数据,且指向为父级菜单时无效,必须是无子集的菜单
// 代点亮说明
路由跳转时,如果当前路由存在route.meta.markName,则会在菜单数据中查找该属性对应的name,并触发点亮(如果存在且可被点亮);不存在该属性时,会点亮当前路由name对应的菜单数据(如果存在且可被点亮),onlyShowFirst模式下,传入的子菜单数据都会被过滤掉,所以都只会点亮第一层父级,而不是自己
-
onlyShowFirst
:只展示菜单第一层数据-->Boolean;非必传;默认false
会监听该参数:
原本父级无法点击事件在此时就能点击了,所以需要自己在路由定义中做路由重定向(有需要的话)
-
i18n
:标题是否开启国际化-->Boolean;非必传;默认false -
showCollapsebtn
:纵向时是否展示收缩按钮-->Boolean;非必传;默认true -
openBtn
:展开时的按钮-->Object;非必传;默认*{type:'el',icon:'Fold'}*
attrs的值会v-bind到对应dom上
type的值,有以下四种情况
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容
-
closeBtn
:收起时的按钮-->Object;非必传;默认*{type:'el',icon:'Expand'}*
attrs的值会v-bind到对应dom上
type的值,有以下四种情况
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容
-
popDark
:弹窗深色化-->Boolean;非必传;默认false
无实际变化,只会给浮窗添加'dark'class
为了应对非html.dark时组件仍深色的情况
-
@collapseChange
:点收缩按钮时触发,这个只是一个空事件,需要自己控制原生属性collapse,包括屏幕多少像素后自动收起,都需要页面自己控制 -
其余参数与官网ele-menu相同
自定义右键菜单 | 拖拽卡片布局组件 | 可拖拽菜单 | echarts组件 | 基于el-menu的菜单组件 | 面包屑组件 | 滑动拼图 | 工作日历 | 多页签组件 | uEditor | wangEditor | 年密度组件