elementui按钮点击后变色又变回

Element UI 的按钮默认提供了一定程度的交互效果，当你点击按钮时，它通常会有明显的视觉反馈，如变为按下状态。这种变化通常是通过 CSS 样式控制的，比如使用 `active` 或 `focus` 类名。如果你想让按钮在点击后自动恢复原色，你可以自定义样式或者在按钮上绑定点击事件，当鼠标离开或失去焦点时将按钮的状态还原。

例如，在 Vue 中，可以这样做：

<el-button @click="buttonClicked" :class="{ active: isButtonActive }">
  点击我
</el-button>

<script>
export default {
  data() {
    return {
      isButtonActive: false,
    };
  },
  methods: {
    buttonClicked() {
      this.isButtonActive = !this.isButtonActive; // 当点击时切换激活状态
    },
  },
  // 可选：CSS 规则，让按钮在失去焦点时回复原始颜色
  directives: {
    focusOut(e) {
      if (!e.target.matches('.el-button')) return;
      this.isButtonActive = false;
    }
  },
};
</script>

在这里，我们创建了一个布尔属性 `isButtonActive` 来跟踪按钮是否处于活跃状态，并在点击时切换这个值。同时，我们添加了一个 `focusOut` 监听器，当按钮失去焦点时将其设置为非活跃状态。