1987WEB视界-分享互联网热点话题和事件

您现在的位置是:首页 > WEB开发 > 正文

WEB开发

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

1987web2024-03-25WEB开发40
思路:ElementPlus提供了样式变量,我的解决思路就是修改其样式变量。新建外部样式xxx.css加入内容:.el-button--primary{--e

思路:Element Plus提供了样式变量,我的解决思路就是修改其样式变量。 新建外部样式 xxx.css 加入内容: .el-button--primary { --el-button-bg-color: #409eff; --el-button-hover-bg-color: #409eff; ...
思路:ElementPlus提供了样式变量,我的解决思路就是修改其样式变量。

新建外部样式 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引入到页面中。注:不知道怎么滴,全局引入页面的按钮不起作用,需要的单个页面中引入。以上内容只修改部分按钮的点击效果,如需修改多个按钮,依次添加。如有更好的解决思路和方案欢迎回复,如有更好的解决思路和方案欢迎回复,如有更好的解决思路和方案欢迎回复如有更好的解决思路和方案欢迎回复,