欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-06 20:26:05
html:

{{tag}}

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 自定义指令自动获取文本框焦点的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:

下一篇: