el-tag选中后改变背景颜色
时间: 2023-08-06 11:07:02 浏览: 62
您可以通过CSS来实现el-tag选中后改变背景颜色的效果。具体方法是:
1. 定义一个选中状态的class,比如.selected:
```css
.selected {
background-color: #409EFF;
color: #fff;
}
```
2. 使用v-bind:class指令,绑定选中状态的class,如下:
```html
<el-tag v-bind:class="{selected: isActive}" @click="isActive = !isActive">标签</el-tag>
```
3. 在组件中定义一个变量isActive,用来表示标签是否被选中,点击标签时将isActive取反即可。
完整代码如下:
```html
<template>
<el-tag v-bind:class="{selected: isActive}" @click="isActive = !isActive">标签</el-tag>
</template>
<script>
export default {
data() {
return {
isActive: false
}
}
}
</script>
<style>
.selected {
background-color: #409EFF;
color: #fff;
}
</style>
```
这样,当您点击标签时,就会改变标签的背景颜色。
相关问题
el-tag选中后背景色
el-tag选中后背景色可以通过设置CSS样式来实现,例如:
```
.el-tag--selected {
background-color: #409EFF;
color: #fff;
}
```
其中,`.el-tag--selected`是el-tag选中后的类名,`background-color`是背景色,`color`是字体颜色。你可以根据需要自定义颜色值。
el-menu-item选中改变颜色
要修改el-menu-item选中后的颜色,你可以使用 .el-menu-item.is-active 选择器,并设置样式属性 background-color。在样式中添加 !important 可以提高优先级。例如:
.el-menu-item.is-active {
background-color: #2D3D51 !important;
color: #18909B !important;
}
这样,当el-menu-item被选中时,背景颜色和字体颜色都会改变。请注意,你也可以根据需要修改其他样式属性。希望这可以帮到你!