elementUI中input组件的autofocus属性不生效

25 篇文章 2 订阅

在这里插入图片描述

如图所以:点击航线名字需要切换输入框,输入框需要自动聚焦,这样即使啥也不修改也能执行失焦事件。
elementUI文档上有一个autofocus属性,把autofocus设置成true发现并没有自动获取焦点。
在这里插入图片描述

失效的原因:
autofocus是vue中input的原生属性,element也支持这种方法,
但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。
解决办法:

自定义指令

在全局定义一个自动获取焦点的自定义指令,在所有组件中都可以使用v-focus来自动获取焦点。
代码如下:
在main.js中定义全局指令

Vue.directive('focus', {
  inserted: function(el) {
    el.querySelector('input').focus();
  }
});

在单组件中使用:

    <el-input
      v-focus  // 自定义指令
      v-if="item.isInput"
      v-model="item.lineName"
      placeholder="请输入标题"
      @blur="saveTitle(item)" />
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值