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 按钮点击后背景色残留问题如何解决？的详细内容，更多请关注其它相关文章！