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 表单取值常用代码
Dec 22 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
vue中appear的用法
Aug 17 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
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
YII实现分页的方法
2014/07/09 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
js类型检查实现代码
2010/10/29 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
详解微信UnionID作用
2019/05/15 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
如何手工释放资源
2013/12/15 面试题
文职个人求职信范文
2013/09/23 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
党员个人对照检查材料
2014/10/01 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书