el-menu .el-submenu.is-opened怎么设置他的style
时间: 2023-08-08 13:04:55 浏览: 166
可以使用以下的 CSS 规则来设置该选择器的样式:
```css
el-menu .el-submenu.is-opened {
/* 在这里添加样式 */
}
```
在上述规则中,可以添加任何想要应用于打开状态的菜单子项的样式。例如,可以使用以下规则更改打开状态的菜单子项的背景颜色:
```css
el-menu .el-submenu.is-opened {
background-color: #f0f0f0;
}
```
需要将这些 CSS 规则添加到你的 CSS 文件中,或者将其添加到你的 HTML 文件的样式标记中。
相关问题
vue的menu中点击el-item但是el-submenu不会收回
这个问题可能是因为你没有正确设置 `unique-opened` 属性。`unique-opened` 属性设置为 `true` 后,只有一个子菜单可以打开,当你点击另一个子菜单时,之前打开的子菜单将自动关闭。你可以尝试在 `el-menu` 标签上添加 `unique-opened` 属性,例如:
```html
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三(无法点击)</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
```
如果你已经设置了 `unique-opened` 属性,但是还是无法正常工作,你可以尝试在 `el-menu` 标签上添加 `collapse` 事件的处理函数,以手动关闭子菜单。例如:
```html
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true" @collapse="handleCollapse">
...
</el-menu>
```
```javascript
methods: {
handleCollapse() {
this.$nextTick(() => {
this.$refs.menu.updateOpened();
});
},
}
```
在上面的例子中,我们在 `handleCollapse` 方法中调用 `updateOpened` 方法来手动关闭子菜单。注意,我们使用了 `$nextTick` 方法来确保 DOM 已经更新完毕。
el-menu不想保留选中效果
如果你不想保留 el-menu 组件的选中效果,你可以设置 unique-opened 属性为 true,这样每次只有一个子菜单可以展开,并且点击其他菜单项时当前菜单项会自动关闭,不会保留选中状态。例如:
```
<el-menu :default-active="$route.path" unique-opened>
<el-menu-item index="/home">首页</el-menu-item>
<el-submenu index="1">
<template slot="title">菜单1</template>
<el-menu-item index="1-1">子菜单1-1</el-menu-item>
<el-menu-item index="1-2">子菜单1-2</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">菜单2</template>
<el-menu-item index="2-1">子菜单2-1</el-menu-item>
<el-menu-item index="2-2">子菜单2-2</el-menu-item>
</el-submenu>
</el-menu>
```
这个例子中,我们把 unique-opened 属性设置为 true,这样每次只有一个子菜单可以展开,点击其他菜单项时当前菜单项会自动关闭,不会保留选中状态。
希望这个回答能够帮到你!