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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
利用python实现汉诺塔游戏
2021/03/01 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
岗位职责的含义
2013/11/17 职场文书
父母寄语大全
2014/04/12 职场文书
网络技术专业求职信
2014/07/13 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
学生保证书
2015/01/16 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
我的收音机情缘
2022/04/05 无线电
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏