elementui中el-button点击后不失去焦点（按钮颜⾊不变）的解决⽅案
初次接触前端，初次使⽤vue，初次使⽤elementui，难免遇到坑。
使⽤el-button的时候，发现点击按钮后，按钮颜⾊仍然保持⿏标悬浮上去时候的效果，并没有恢复到正常状态
原因
el-button 的⿏标经过样式以及点击/获取焦点样式其实都是⽤css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发；也就是说获得焦点才会导致 el-button ⾼亮；
解决⽅案
你可能会想去掉 :focus这个选择器；或者覆盖
我告诉你！不可能！
我尝试层叠掉那个样式但是color和boder-color貌似给不了none只能⽤新的样式重叠
1.直接使⽤CSS 不使⽤他的样式(推荐)
直接到 el-button 给它⼀个类名 然后直接给它写样式
如下就是⿏标经过变⾊：
css鼠标点击样式<template>
<el-button class="view" type="primary" icon="el-icon-view" circle size="mini"/>
</template>
<style scoped>
.view:hover {
background-color: #3f9eff;
color: #fff;
border-color: #3f9eff;
}
.view {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}
</style>
2.利⽤强制失去聚焦解决
使⽤element-ui的样式利⽤强制失去聚焦解决
因为el-buttion 本⾝就是因为点击后聚焦才导致按钮⼀直⾼亮，那么我们就让他点击后强制失去焦点！
<template>
<el-button class="view" type="primary" icon="el-icon-view" circle size="mini"/>
</template>
<script>
fn(evt){
console.log(evt)
let target = evt.target
deName ==='I'){
target = evt.target.parentNode
}
target.blur()
},
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。