<el-menu>中设置了active-text-color="#1e1e1e" :router="true",然后选择会鼠标一放开就看不到字了
时间: 2023-12-26 17:03:48 浏览: 21
如果您在 `<el-menu>` 中设置了 `active-text-color` 为与背景颜色相同的颜色值,那么在菜单选中时,文本颜色和背景颜色就会相同,就会出现看不到文本的情况。为了避免这种情况,可以将 `active-text-color` 设置为与未选中状态下文本颜色不同的颜色值。
例如,如果您的未选中状态下文本颜色为黑色(#333),则可以将 `active-text-color` 设置为白色(#fff),如下所示:
```
<el-menu :router="true" active-text-color="#fff" ...>
...
</el-menu>
```
这样,在菜单选中时,文本颜色就会变为白色,与背景颜色不同,就可以正常显示了。
相关问题
<el-menu active-text-color="#01B9D1" background-color="#393D49" class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff" router style="height:100%;width:100%;" mode="vertical" > <el-menu-item index="/home/toSetScene"> <template #title> <el-icon><House /></el-icon> <span>场景管理</span> </template> </el-menu-item> </el-menu> 中el-menu增加:collapse="isCollapse"样式变形
如果您想让el-menu在一定条件下收缩,您可以将isCollapse设置为true,然后在el-menu中增加:collapse="isCollapse"属性,就可以实现收缩的效果。代码如下:
<el-menu
active-text-color="#01B9D1"
background-color="#393D49"
class="el-menu-vertical-demo"
:default-active="$route.path"
text-color="#fff"
router
style="height:100%;width:100%;"
mode="vertical"
:collapse="isCollapse"
>
<el-menu-item index="/home/toSetScene">
<template #title>
<el-icon><House /></el-icon>
<span>场景管理</span>
</template>
</el-menu-item>
</el-menu>
请注意,这只是一个简单的示例,如果您想实现更复杂的收缩效果,您需要编写更多的代码。
<el-menu active-text-color="#01B9D1" background-color="#393D49" class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff" router style="height:100%;width:100%;" mode="vertical" :collapse="isCollapse" > <el-menu-item index="/home/toSetScene"> <template #title> <el-icon><House /></el-icon> <span>场景管理</span> </template> </el-menu-item> </el-menu> 中el-menu增加:collapse="isCollapse"样式变形
是的,当您设置了:collapse="isCollapse"属性后,el-menu会出现收缩的效果。如果isCollapse为true,el-menu会被收缩,如果isCollapse为false,el-menu会被展开。您可以在Vue组件中通过修改isCollapse的值来控制el-menu的展开和收缩。例如:
```javascript
<template>
<div>
<el-button type="primary" @click="toggleCollapse">{{ isCollapse ? '展开' : '收缩' }}</el-button>
<el-menu
:collapse="isCollapse"
...
>
...
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: true
}
},
methods: {
toggleCollapse() {
this.isCollapse = !this.isCollapse
}
}
}
</script>
```
这样,您可以在点击按钮时切换isCollapse的值,从而控制el-menu的展开和收缩。