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

发布时间:2020-10-01 12:03:22 作者:lx_1024
来源:脚本之家 阅读:245

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

推荐阅读:
  1. 使用Vue.directive()的注意事项有哪些
  2. 怎么在vue中实现一个回车键登录功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue 文本框 焦点

上一篇:layui添加动态菜单与选项卡

下一篇:解决IDEA中不能正常输入光标变粗的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》