解决el-button的:focus引起的样式问题

问题描述

当点击按钮时，按钮处于灰色状态，但是鼠标移出按钮，按钮并没有回复成原本的颜色

问题产生原因

在鼠标点击按钮后，按钮处于:focus状态

// element的源码
.el-button:focus,
.el-button:hover {
  color: var(--el-button-hover-text-color);
  border-color: var(--el-button-hover-border-color);
  background-color: var(--el-button-hover-bg-color);
  outline: 0;
}

解决方法

在全局样式中，把按钮的:focus样式设置成按钮原本的样子，只让按钮在鼠标悬浮按钮时发生颜色变化

.el-button:focus {
  color: var(--el-button-text-color);
  background-color: var(--el-button-bg-color);
  border-color: var(--el-button-border-color);
}