el-button点击后颜色变化

可以通过为按钮添加 `:class` 或 `:style` 属性来控制按钮的样式。下面是一个例子，当按钮被点击时，它的背景色将变为灰色：

<el-button @click="changeColor" :style="{ backgroundColor: bgColor }">点击我</el-button>

data() {
  return {
    bgColor: '#409EFF'
  }
},
methods: {
  changeColor() {
    this.bgColor = '#999'
  }
}

在上面的代码中，我们为按钮绑定了一个点击事件 `@click="changeColor"`，当按钮被点击时，`changeColor` 方法将被调用，其中 `bgColor` 的值将被更新为灰色。我们使用 `:style` 属性将 `bgColor` 作为按钮背景色的值来绑定。这样，当 `bgColor` 的值发生变化时，按钮的背景色也会相应地发生变化。

相关问题

el-button点击后文字颜色变化

您可以使用 `:active` 和 `:visited` 伪类来改变 `<el-button>` 元素的文本颜色。例如：

.el-button:active,
.el-button:visited {
  color: red;
}

这将使点击 `<el-button>` 元素后的文本颜色变为红色。您可以根据需要更改颜色值。

el-button鼠标悬停颜色不变

### 解决 `el-button` 组件鼠标悬停时颜色不变化的问题

对于 `Element UI` 中的 `el-button` 组件，在某些情况下可能会遇到鼠标悬停时背景颜色或文字颜色未按预期改变的情况。这通常是因为样式优先级问题或是自定义样式覆盖了默认行为。

#### 方法一：通过 CSS 覆盖默认样式

可以通过增加特定的选择器来提高样式的优先级，从而确保自定义的颜色能够在悬停状态下生效：

/* 提高 .el-button:hover 的优先级 */
.el-button.custom-hover-class:hover {
    background-color: #409EFF !important; /* 自定义悬停背景色 */
    color: white !important;               /* 自定义悬停字体颜色 */
}

在 HTML 或模板文件中给按钮添加对应的类名：

<template>
  <el-button class="custom-hover-class">点击我</el-button>
</template>

这种方法简单直接，适用于只需要修改少量按钮场景下的解决方案[^1]。

#### 方法二：全局配置主题变量

如果项目中有大量类似的定制需求，则可以考虑调整 Element UI 主题中的 LESS 变量表。具体操作是在项目的入口处引入并重写这些预设值之前设置新的颜色参数：

// 修改 element-ui/lib/theme-chalk/index.css 文件前加入如下代码
@button-bg: #fff;
@button-active-bg: @primary-color;

@import "~element-ui/packages/theme-chalk/src/button";

此方法更为彻底，能够一次性影响整个应用内的所有按钮组件的行为，但需要注意的是这样做会影响到所有的同类型控件，因此要谨慎评估其适用范围。

#### 方法三：利用 scoped 样式作用域

当仅希望局部范围内更改某个页面上的按钮外观而不干扰其他地方的设计时，可以在单文件组件内使用 `<style scoped>` 来限定样式的影响力:

<style scoped>
.el-button {
  &:hover,&:focus{
      background-color:#67C23A!important;
      border-color:#67C23A!important;
      color:white!important;
  }
}
</style>

<template>
  <!-- 这里的样式只会影响当前组件 -->
  <el-button>测试按钮</el-button>
</template>

这种方式既保持了一定程度上的灵活性又不会引起不必要的副作用，适合用于维护大型应用程序时减少潜在冲突的风险.