vue输入框获取焦点（vue input获取焦点事件）

在前面Vue实战055：WEB页面锁屏功能实现详解中，我们有个点击锁屏图标弹出输入锁屏密码对话框的功能，这时候我们需要点击输入框然后输入我们的密码，所以现在在优化下，弹出对话框的时候自动获取输入框焦点，这样我们就可以直接输入密码锁屏了。

比较简单的方法就是通过watch监听对话框属性，当对话框显示时box属性为true，这是我们通过refs属性来定位DOM元素并对元素进行focus操作，由于这里我们用的是Element组件，所以获取元素的时候需要注意实际操作的DOM元素在该元素的子元素中。

watch:{
 box(){
 if(this.box==true){
 this.$refs.input.$refs.input.focus()
 }
 }
},

vue输入框获取焦点（vue input获取焦点事件）

这时你会发现对应的元素，因为el-input本身是作为渲染元素来动态渲染的，而ref是作为渲染结果被创建的，在渲染初期该元素还不存在自然就无法访问到了。所以这里我们要利用$nextTick，$nextTick 是在 DOM 更新循环结束之后执行的延迟回调，在修改数据之后使用 $refs就可以获取更新后的 DOM元素了。

vue输入框获取焦点（vue input获取焦点事件）

除了这种方法我们也可以使用Vue中的directive属性，实现自定义自动获取焦点功能指令。directive为指令定义提供几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

vue输入框获取焦点（vue input获取焦点事件）

这里我们使用inserted函数：被绑定元素插入父节点时调用，该方法可以传入3个参数分别是el、binding、vnode，directive写在export default {}中。

el：指所绑定的元素，可以用来直接操作 DOM 。

binding：一个包含多属性的对象，如：name、value等属性

vnode：Vue 编译生成的虚拟节点。

vue输入框获取焦点（vue input获取焦点事件）

这里需要注意的是el.children[0]，因为element渲染后结构是div包着input，focus()在div是没有任何效果的。在需要使用的标签中引用我们的自定义指令focus，这里我在el-input元素中添加了v-focus指令，这样当我点击锁屏图标时鼠标就会自动聚焦到input输入框中了。

vue输入框获取焦点（vue input获取焦点事件）