Element-UI 按钮点击后背景色残留问题如何解决？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Element-UI 按钮点击后背景色残留问题如何解决？》，聊聊，我们一起来看看吧！

避免按钮点击后背景色残留

在使用 element-ui 的按钮控件时，经常遇到点击后按钮背景色会留下，只有点击其他位置才能消失的问题。想要解决这一问题，可以从以下方面着手：

使用 javascript 移除焦点

这是因为使用了 :focus 伪类，可以利用 javascript 在点击按钮之外的区域时移除该焦点：

clickhandler(evt) {
  let target = evt.target;
  if(target.nodename == "span"){
    target = evt.target.parentnode;
  }
  target.blur();
}

修改样式

另一种方式是重新编写样式，使得按钮只有在悬停或点击按下时才有背景色，而在鼠标移开后恢复原来的样式：

/*鼠标点击后移开，恢复本身样式*/
.buttonDiv, .buttonDiv:focus:not(.buttonDiv:hover){ 
  margin-right: 12px;
  border: 1px solid #2794f8;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 #f4f4f4;
  color: #2794f8;
  background: white;
}
/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
.buttonDiv:focus, .buttonDiv:hover{
  background: #eaf5ff;
  border: 1px solid #2794f8 !important;
  color: #2794f8;
}
/*鼠标按下，没有抬起*/
.buttonDiv:active {
  background: #2794f8;
  color: white;
}

今天关于《Element-UI 按钮点击后背景色残留问题如何解决？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！