前言

本文直接參考vue2.0官方文檔， 并演示博主項目中的使用

自定義指令 directive

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。舉個聚焦輸入框的例子：

當頁面加載時，該元素將獲得焦點 (注意：autofocus 在移動版 Safari 上不工作)。事實上，只要你在打開這個頁面后還沒點擊過任何內容，這個輸入框就應當還是處于聚焦狀態(tài)。現(xiàn)在讓我們用指令來實現(xiàn)這個功能：

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})

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

<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即可，如下圖：

優(yōu)勢

一個字：簡單 O(∩_∩)O哈哈~

和傳統(tǒng)方式比較：

傳統(tǒng)方法使用ElementUI input提供的focus()來手動觸發(fā)，通過$refs[ref].focus()來使 input 獲取焦點

然而我們在使用的時候，尤其是將其放在mounted或者created或watch()的immediate: true初始化時，經(jīng)常會失效，原因就是，組件渲染需要時間，如果JS處理比渲染的快，就會造成失效問題，如何解決呢？那就是延后處理，常用的主要有兩種方法：

setTimeout(fn, 0) 永遠的神

這里涉及到JavaScript的EventLoop，簡單來講，setTimeout的回調是異步的，js會將異步的任務放在同步任務后處理。

指定某個任務在主線程最早可得的空閑時間執(zhí)行，也就是說，盡可能早得執(zhí)行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現(xiàn)有的事件都處理完，才會得到執(zhí)行。

所以我們可以將focus()放在settimeout回調中：

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

$nextTick(callback)

在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

目的也是等待組件渲染結束后執(zhí)行，用法：

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

小結

綜上所述，自定義指令v-focus的好處就顯而易見了

• 不必在控件上定義ref
• 不用通過settimeout和nextTick的方式延遲執(zhí)行

以上就是Vue自定義指令v-focus實例詳解的詳細內容，更多關于Vue自定義指令v-focus的資料請關注腳本之家其它相關文章！

最新評論