如何实现Vue自定义指令v-focus的实例详解？

本文共计1122个文字，预计阅读时间需要5分钟。

目录前言自定义指令项目实际使用技术背景实际操作优势setTimeout(fn, 0) 的神奇$nextTick(callback)小结前言文本直接参考Vue 2.0官方文档，并结合博主项目中的应用进行演示。自定义指令自定义指令指令的具体使用方法。

目录

• 前言
• 自定义指令 directive
• 项目实际使用
• 技术背景
• 实际操作
• 优势
• setTimeout(fn, 0) 永远的神
• $nextTick(callback)
• 小结

前言

本文直接参考vue2.0官方文档， 并演示博主项目中的使用

自定义指令 directive

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子：

当页面加载时，该元素将获得焦点 (注意：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

然后你可以在模板中任何元素上使用新的v-focusproperty，如下：

<input v-focus>

项目实际使用

技术背景

• vue2.0
• nuxt.js
• ElementUI

实际操作

首先不同于vue-cli脚手架在入口main.js里面定义自定义指令，在nuxt.js中，nuxt.config.js作为项目的入口文件和配置文件，定义自定义指令也是在这里定义

我们直接跳到nuxt.config.js的plugins配置项

plugins：该配置项用于配置那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。

拿博主项目例子来看，在plugins文件夹下新建directive.js文件，引入Vue，定义自定义指令

组件中使用，直接在想要默认焦点的地方写入v-focus即可，如下图：

优势

一个字：简单 O(∩_∩)O哈哈~

和传统方式比较：

传统方法使用ElementUI input提供的focus()来手动触发，通过$refs[ref].focus()来使 input 获取焦点

然而我们在使用的时候，尤其是将其放在mounted或者created或watch()的immediate: true初始化时，经常会失效，原因就是，组件渲染需要时间，如果JS处理比渲染的快，就会造成失效问题，如何解决呢？那就是延后处理，常用的主要有两种方法：

setTimeout(fn, 0) 永远的神

这里涉及到JavaScript的EventLoop，简单来讲，setTimeout的回调是异步的，js会将异步的任务放在同步任务后处理。

指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

所以我们可以将focus()放在settimeout回调中：

setTimeout(function () { this.$refs['ref名'].focus() }, 0)

$nextTick(callback)

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

目的也是等待组件渲染结束后执行，用法：

this.$nextTick(function () { this.$refs['ref名'].focus() })

小结

综上所述，自定义指令v-focus的好处就显而易见了

• 不必在控件上定义ref
• 不用通过settimeout和nextTick的方式延迟执行

以上就是Vue自定义指令v-focus实例详解的详细内容，更多关于Vue自定义指令v-focus的资料请关注易盾网络其它相关文章！