el-button点击后变色

el-button 点击后变色的实现，可以通过添加样式来完成。在默认状态下，按钮的背景色和字体颜色是通过CSS属性来定义的。当点击按钮后，可以通过修改按钮的背景色和字体颜色，来实现点击后变色的效果。以下是一个示例代码：

<template>
  <div>
    <el-button @click="handleClick" :style="{ backgroundColor: btnBgColor, color: btnFontColor }">{{ btnText }}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnText: 'Click me',
      btnBgColor: '#409EFF',
      btnFontColor: '#fff'
    };
  },
  methods: {
    handleClick() {
      this.btnBgColor = '#67C23A';
      this.btnFontColor = '#000';
    }
  }
};
</script>

<style scoped>
.el-button {
  transition: all 0.3s ease-in-out;
}
</style>

以上代码实现了一个简单的 el-button 点击后变色的效果。在默认状态下，按钮的背景色是 #409EFF，字体颜色是 #fff。当点击按钮后，按钮的背景色会变成 #67C23A，字体颜色会变成 #000。这里使用了 transition 属性来实现平滑的过渡效果。