美文网首页
完美解决element-ui-plus按钮点击后不会自动失焦

完美解决element-ui-plus按钮点击后不会自动失焦

作者: myjourney | 来源:发表于2023-10-20 17:00 被阅读0次
  • 现象:
    点击按钮后,如果不再点击别的地方,按钮不会失焦,一直有颜色~


    不失去焦点问题.png

解决:

1、 建立 v-btn

// src/directives/btn.js
export default {
    install: (app) => {
      const fun = function (evt) {
        let target = evt.target
        if (target.nodeName == 'SPAN') {
          target = evt.target.parentNode
        }
        target.blur()
      }
      app.directive('btn', {
        mounted(el) {
          el.addEventListener('focus', fun)
        },
        unmounted(el) {
          el.removeEventListener('focus', fun)
        }
      })
    }
  }

2、main.js中注册 全局使用

import btn from "@/directives/btn";
const app = createApp(App)
app.use(btn)

3、用到的地方添加v-tbn即可。

<el-button
        v-btn
         :class="likeButtonClass"
         @click="likeMessage"
         >{{ $t('mesage.like') }}
</el-button>

参考链接

相关文章

网友评论

      本文标题:完美解决element-ui-plus按钮点击后不会自动失焦

      本文链接:https://www.haomeiwen.com/subject/lhbkidtx.html