elementui按钮点击后无法自动失焦问题处理

用element-plus开发的时候,项目种使用了很多按钮组件,发现点击之后按钮无法自动失焦,单个按钮处理任务太过庞大,采用自定义指令可以解决这个问题。

在src目录下创建directive文件夹,在此文件夹下创建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)
        }
      })
    }
  }

在main.js文件种引入

import btn from './directive/btn'
app.use(btn)

使用按钮时<el-button v-btn></button>采用 v-btn的指令就可以使按钮点击后自动失焦了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值