门户网站 jsp每日新闻简报

问题描述：
按钮点击后会被设置focus样式，只有点击其他地方才能恢复。
期望：点击后，样式保持不变。
起初我使用样式覆盖掉focus样式，让他看起来不变，但是点击后再hover，hover就无效了，因为按钮处于focus状态。

解决方案1：
查找所有el-button，让focus事件触发失焦。在main加：

const removeButtonFocus = {install(app: any) {app.mixin({mounted() {this.$nextTick(() => {document.querySelectorAll('.el-button').forEach(btn => {btn.addEventListener('focus', (e:any) => e.target.blur())})})}})}
}
app.use(removeButtonFocus)

解决方案2
只给部分按钮去除focus，使用自定义指令。在main加：

import type { Directive } from 'vue'
const vNoFocus: Directive = {mounted(el: any) {el._focusHandler = () => el.blur()el.addEventListener('focus', el._focusHandler)},beforeUnmount(el: any) {el.removeEventListener('focus', el._focusHandler)}
}
app.directive('no-focus', vNoFocus) // 注册v-no-focus指令

使用：

<el-button v-no-focus >重置</el-button>
<el-button v-no-focus>筛选</el-button>