el-button点击了按钮会出现保留点击的状态

问题
el-button点击了按钮之后,将鼠标移出按钮,会出现保留点击的状态

再查看它的css样式后,可以看到官方默认设置有:focus的状态规则

解决办法

在el-button的css里自定义或者复制原有的color、border-color、background-color三条样式,

然后再重写:hover方法就可以了,

其实就是覆盖官方样式

.el-button {
      margin-right: 10px;
      font-size: 16px;
      font-weight: 600;
      padding: 5px;

      // 因为el-button默认有focus状态,我们复制它的属性或者自定义下面三条属性就可以取消focus状态了
      // 但是hover也会被取消,所以得再写一个hover
      color: #606266;
      border-color: #DCDFE6;
      background-color: #fff;
    }

    .el-button:hover {
      color: #409EFF;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
}
posted @ 2022-08-27 19:35  槑孒  阅读(1928)  评论(1编辑  收藏  举报