element 如何让菜单既有高亮效果又有悬停效果,并且点击时只显示高亮效果
时间: 2023-08-18 13:10:07 浏览: 75
要让 Element UI 的导航菜单既有高亮效果又有悬停效果,并且点击菜单项时只显示高亮效果,可以使用 CSS 来定义 `active` 和 `hover` 样式,并且使用 JavaScript 来监听菜单项的点击事件,从而在点击菜单项时移除 `hover` 样式。
以下是一个示例代码:
```html
<template>
<el-menu class="el-menu-demo" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">菜单项1</el-menu-item>
<el-menu-item index="2">菜单项2</el-menu-item>
<el-menu-item index="3">菜单项3</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(index) {
this.activeIndex = index;
}
}
}
</script>
<style>
.el-menu-demo .el-menu-item--active,
.el-menu-demo .el-menu-item--active:hover {
background-color: #409EFF !important;
color: #fff !important;
}
</style>
```
在上面的代码中,我们使用 CSS 来定义 `active` 和 `hover` 样式,并且使用 `!important` 来强制优先级。同时,我们使用 JavaScript 来监听菜单项的 `select` 事件,并且在事件处理函数中更新 `activeIndex` 数据,从而实现点击菜单项时只显示高亮效果。
注意,我们设置了 `active` 和 `hover` 样式的优先级相同,这样在鼠标悬停时和点击菜单项时都会显示高亮效果。同时,我们在样式中使用了 `!important`,这样可以覆盖 Element UI 默认的样式,从而实现自定义效果。
希望这个回答对你有帮助!
阅读全文