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


Posted in Javascript onAugust 25, 2018

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

Javascript 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 #Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
You might like
How do I change MySQL timezone?
2008/03/26 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
小程序实现留言板
2018/11/02 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Django中的Model操作表的实现
2018/07/24 Python
python pip如何手动安装二进制包
2020/09/30 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
为什么要有struct关键字
2012/05/08 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
运动会广播稿200字
2014/01/15 职场文书
工作自我评价怎么写
2014/01/29 职场文书
销售员岗位职责范本
2014/02/03 职场文书
办公经费申请报告
2015/05/15 职场文书
太行山上观后感
2015/06/05 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android