vue3 Element Plus按钮点击之后颜色不会还原的解决方案

  • vue3 Element Plus按钮点击之后颜色不会还原的解决方案已关闭评论
  • 168 次浏览
  • A+
所属分类:Web前端
摘要

新建外部样式 xxx.css加入内容:

思路:Element Plus提供了样式变量,我的解决思路就是修改其样式变量。

新建外部样式 xxx.css

加入内容:

.el-button--primary {
--el-button-bg-color: #409eff;
--el-button-hover-bg-color: #409eff;
}
.el-button--primary:hover {
--el-button-hover-bg-color: #79bbff;
}

.el-button--warning.is-plain {
--el-button-bg-color: #fdf6ec;
--el-button-hover-text-color: #e6a23c;
--el-button-hover-bg-color: #fdf6ec;
}
.el-button--warning.is-plain:hover {
--el-button-hover-text-color: #fff;
--el-button-hover-bg-color: #e6a23c;
}
.el-button--danger.is-plain {
--el-button-bg-color: #fef0f0;
--el-button-hover-text-color: #f56c6c;
--el-button-hover-bg-color: #fef0f0;
}
.el-button--danger.is-plain:hover {
--el-button-hover-text-color: #fff;
--el-button-hover-bg-color: #f56c6c;
}


然后将xxx.css 引入到页面中。注:不知道怎么滴,全局引入页面的按钮不起作用,需要的单个页面中引入。
以上内容只修改部分按钮的点击效果,如需修改多个按钮,依次添加。

如有更好的解决思路和方案欢迎回复,
如有更好的解决思路和方案欢迎回复,
如有更好的解决思路和方案欢迎回复
如有更好的解决思路和方案欢迎回复,