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

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

赞 (0)

相关推荐

  • 使用Vue自定义指令实现Select组件

    本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • Vue自定义指令详解

    在 AngularJs 中,它的指令使用 directive ( name,factor_function)来实现: angular.module( 'myapp' ,[]) .directive (myDirective,function (){ return{ template : '', restrict: '', replace: '', ........ } }) 除了内置指令,Vue.js 也允许组件自定义指令. + 自定义指令提供一种机制将数据的变化映射为 DOM 行为 + Vue

  • vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

    vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

    前言 大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive.下面话不多说了,来一起看看详细的介绍: directive 这个单词是我们写自定义指令的关键字哦 自定义指令为我们提供了几个钩子函数,这时候你一定好奇什么是钩子函数,说简单点,就是集中表现状态 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑

  • Vue.directive 自定义指令的问题小结

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my

  • vue.js通过自定义指令实现数据拉取更新的实现方法

    前言 这篇文章的代码片段位于 vue 的单文件组件中,即以 .vue 结尾的文件中,本文说明的只是一种实现方法,既不是唯一的方法也不是最好的方法,如果大家有更好的方法可以留言,大家进行讨论. 第一步 首先,一定要先定义变量: // app.vue <script> data () { return { // 定义 getData getData:{}, // 定义自定义指令的绑定值 ifUpdate:true } } 第二步 然后要使用 ajax 的话,要在 index.html 里引入 jq

  • Vue自定义指令使用方法详解

    Vue自定义指令使用方法详解

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数 定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my

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

    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() } } } 我的

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • python TKinter获取文本框内容的方法

    如下所示: #coding:utf-8 import urllib,urllib2 import Tkinter #导入TKinter模块 ytm=Tkinter.Tk() #创建Tk对象 ytm.title("login") #设置窗口标题 ytm.geometry("300x300") #设置窗口尺寸 l1=Tkinter.Label(ytm,text="用户名") #标签 l1.pack() #指定包管理器放置组件 user_text=Tk

  • Android自动编辑文本框(AutoCompleteTextView)使用方法详解

    Android自动编辑文本框(AutoCompleteTextView)使用方法详解

    自动编辑文本框(AutoCompleteTextView)继承自EditText,能够接受用户的输入编辑,但是有这自己的特色功能:输入一定的字符以后会弹出下拉列表提示供用户选择,用户选择之后会自动填充文本框.这项功能正如浏览器的输入提示: 由于自动编辑文本框继承于EditText,它能够支持EditText的全部属性,但是在输入提示方面它有着自己的独特属性: android:completionHint     为弹出下拉菜单指定提示标题 android:completionThreshold 

  • Vue自定义指令上报Google Analytics事件统计的方法

    发现问题 一般前端开发离不开数据统计,我们经常需要接入统计服务以方便运营,例如现在需要统计一个按钮 <template> <button @click="handleClick" /> </template> <script> export default { methods: { handleClick() { window.alert('button click') } } } </script> 引入 ga 后是这样上报

  • vue自定义指令实现仅支持输入数字和浮点型的示例

    再开始本篇的讨论之前,先思考几个问题: 使用html元素属性type='number'是否可以满足要求 Vue中指令一般被设计用来操作dom元素的,而vue视图是基于数据模型的,如何在操作dom的同时,同时更新数据 你定义的指令不能只能在input元素上使用,还要支持在其父元素上使用,自定义组件及第三方组件上使用 你的指令是不是支持局部作用域,比如for循环渲染的数据的单元item,如何识别这个item进行数据更新和dom操作 如何控制字符数目,超出禁止输入 如何实现全局性的功能定义,从而在各个

  • 8个非常实用的Vue自定义指令

    本文在github做了收录 github.com/Michael-lzg- demo源码地址 github.com/Michael-lzg- 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令.它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作. Vue 自定义指令有全局注册和局部注册两种方式.先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令.然后

  • vue自定义指令directive实例详解

    vue自定义指令directive实例详解

    下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive

  • Vue自定义render统一项目组弹框功能

    一.本文收获 pick 二.为什么要统一封装弹框: 要封装成怎样 通过举例常规弹框的写法.我们可以体会到,通常要弹出一个页面,需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue (弹框主体):需要 parent.vue 设置flag控制弹框显示隐藏, normalDialog.vue 关闭的时候设置 parent.vue 对应 flag .缺点: 流程繁杂.配置繁琐.不灵活.样式不统一和参数传递麻烦等 .如果一个项目弹框较多的时候,弊端将会更明显,大量的 is

随机推荐