el-menu-item如何阻止点击高亮
时间: 2023-10-18 20:04:45 浏览: 163
要阻止 `el-menu-item` 的点击高亮,可以添加 `disabled` 属性来禁用该菜单项的交互,例如:
```html
<el-menu>
<el-menu-item index="1">可点击菜单项</el-menu-item>
<el-menu-item index="2" disabled>禁用菜单项</el-menu-item>
</el-menu>
```
这样,第二个菜单项将无法被点击,并且也不会出现点击高亮效果。
相关问题
点击el-menu-item,如何不高亮
如果想要点击el-menu-item时不出现高亮效果,可以通过添加以下CSS样式来实现:
```
.el-menu-item.is-active,
.el-menu-item:focus,
.el-menu-item:hover {
background-color: transparent !important;
}
```
这样设置后,当你点击el-menu-item时,它将不再出现高亮效果。注意,这里使用了!important来覆盖原有的样式,确保这个样式生效。
el-menu-item 点击后不切换高亮状态
如果你不希望 el-menu-item 点击后切换高亮状态,可以通过设置 unique-opened 属性来实现。当设置为 true 时,el-menu 只会保持一个子菜单的展开状态,所以不会出现多个 el-menu-item 同时处于激活状态的情况。同时,你也可以通过设置 default-active 属性来指定初始时要激活的菜单项,而不是通过点击进行激活。例如,设置 default-active="1" 后,el-menu-item 的第一个子项会在页面加载时处于激活状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)