vue 自定义指令自动获取文本框焦点的方法

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue 自定义指令自动获取文本框焦点的方法

lx_1024   2020-05-16 我要评论

HTML:

<p><b v-show="show">{{tag}}</b><input v-focus v-model="tag" :hidden="show" type="text"></p>

js:

官方例子:

directives: {
  focus: {
  // 指令的定义
  inserted: function (el) {
   el.focus()
  }
  }
 }

我的:

directives: {
  focus:function (el) {
   el.focus();
  }
 }

在我的项目中使用官方的例子时,input不能自动获取焦点,使用我的js时可自动获取焦点,查询相关资料后知道,insert是一个钩子函数,只要父节点存在,在插入父节点时调用,我这里并没有插入所以没有调用,所以还是要多读多学,仔细一些。

拓展知识:vue 自定义指令 自动聚焦的实例讲解

如下所示:

<el-input v-model="data.carDealerJobs.bankDetail" v-focus placeholder="请输入内容" size="small"></el-input>

局部注册指令:

 directives: {
  focus: {
  inserted: function (el) {
   el.children[0].focus()
  }
  }
 }

以上这篇vue 自定义指令自动获取文本框焦点的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们