el-menu点击变色后不能恢复
时间: 2023-07-14 20:14:03 浏览: 59
要使 el-menu 点击变色后能够恢复,可以使用 CSS 的 :active 伪类来实现。
首先,在 el-menu 的样式中添加 :active 伪类,例如:
```
.el-menu-item:active {
background-color: #f5f5f5;
}
```
然后,在 el-menu 的外层添加一个监听点击事件的函数,例如:
```
<el-menu @select="handleMenuSelect">
...
</el-menu>
```
在 handleMenuSelect 函数中,将当前选中的菜单项的样式恢复为默认样式,例如:
```
methods: {
handleMenuSelect(index, indexPath) {
// 恢复之前选中的菜单项的样式
const prevItem = document.querySelector('.el-menu-item.is-active');
if (prevItem) {
prevItem.classList.remove('is-active');
}
}
}
```
这样,当用户点击一个菜单项时,该菜单项会变成 :active 状态,同时之前选中的菜单项的样式会被恢复为默认样式。
相关问题
el-menu-item点击后出现黑框
el-menu-item点击后出现黑框是因为el-menu-item组件在被点击或者激活状态下会展现一个默认的样式,这个样式包括设置菜单项的背景颜色为黑色。这个黑框的目的是用来提醒用户当前所处的菜单项。
要去掉el-menu-item点击后出现的黑框,可以通过自定义样式来修改菜单项的样式。在你的样式文件中添加以下代码:
.el-menu-item.is-active {
background-color: transparent !important;
}
上面的代码将把点击激活状态下菜单项的背景颜色设置为透明,这样就不会出现黑框了。这里使用了 `!important` 以确保样式生效。
除了修改背景颜色为透明,你也可以根据你的需要修改其他的样式属性,比如颜色、边框等。只需要在上述的选择器中添加你想要修改的属性和值即可。
总的来说,通过自定义样式可以解决el-menu-item点击后出现黑框的问题。但是需要注意的是,在修改样式时要谨慎,不要影响到其他相关的样式。
el-menu-item 点击后不切换高亮状态
如果你不希望 el-menu-item 点击后切换高亮状态,可以通过设置 unique-opened 属性来实现。当设置为 true 时,el-menu 只会保持一个子菜单的展开状态,所以不会出现多个 el-menu-item 同时处于激活状态的情况。同时,你也可以通过设置 default-active 属性来指定初始时要激活的菜单项,而不是通过点击进行激活。例如,设置 default-active="1" 后,el-menu-item 的第一个子项会在页面加载时处于激活状态。