vue Element-ui NavMenu导航菜单Menu Methods与Menu Events的坑
Element-ui 导航菜单Menu Methods与Menu Events的踩坑日记及解决方案仅供参考自我记录.项目最初的想法是省略首页/的菜单配置 默认是首页 但当使用面包屑跳转到 首页的时候 路由切换回去菜单没有合并下面是示例图此时想到的解决方案是 监听路由变化 this.$route.path === '/' 的时候 调用elm组件事件 关闭菜单 这是错误的 此处有坑element 组件
·
Element-ui 导航菜单Menu Methods与Menu Events的踩坑日记及解决方案
Element ui中Nav Menu 导航菜单关闭指定sub menu
仅供参考
自我记录.
项目最初的想法是省略首页/的菜单配置
默认是首页 但当使用面包屑跳转到 首页
的时候 路由切换回去菜单没有合并
下面是示例图
此时想到的解决方案是 监听路由变化 this.$route.path === '/'
的时候 调用elm组件事件 关闭菜单 这是错误的 此处有坑
element 组件说明示例图如下
比较坑的就是 element ui的事件是通过@close="xxx"
触发
错误用法 踩坑
此时调用成功但是不生效
<el-menu
router
:collapse="!isCollapse"
:collapse-transition="false"
background-color="#002033"
:default-active="$route.path"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
text-color="#fff"
active-text-color="#ffd04b"
unique-opened>
</el-menu>
watch: {
$route () {
console.log(this.$route.path)
if (this.$route.path === '/') {
//当路径为首页的时候 关闭此时打开的menu
this.handleClose(this.KeyIndex)
}
}
},
methods: {
// sub-menu 展开的拿到index
handleOpen (key) {
console.log('我是打开index', key)
this.KeyIndex = key
},
// 使用index 关闭指定的sub-menu
handleClose (key) {
console.log(key)
}
}
正确方法
接下来看一下 element 的 方法调用是要绑定ref="menu"
<el-menu
ref="menu"
router
:collapse="!isCollapse"
:collapse-transition="false"
background-color="#002033"
:default-active="$route.path"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
text-color="#fff"
active-text-color="#ffd04b"
unique-opened>
</el-menu>
watch: {
$route () {
console.log(this.$route.path)
if (this.$route.path === '/') {
this.$refs.menu.close(this.KeyIndex)
}
}
},
methods: {
handleOpen (key) {
console.log('我是打开index', key)
this.KeyIndex = key
}
}
组件方法使用说明
最后效果图
整体概括:监听路由-关闭菜单
思路是对的 但是要记得闭坑方法与事件
使用的区别
!!!最后emelent组件事件的用法是@去绑定的
而方法是通过ref操作的
望大家谨记
不要犯和我一样的错误!!!
更多推荐
已为社区贡献5条内容
所有评论(0)