前言

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

自定義指令 directive

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

當(dāng)頁(yè)面加載時(shí)，該元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)。事實(shí)上，只要你在打開這個(gè)頁(yè)面后還沒(méi)點(diǎn)擊過(guò)任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)?，F(xiàn)在讓我們用指令來(lái)實(shí)現(xiàn)這個(gè)功能：

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

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

<input v-focus>

項(xiàng)目實(shí)際使用

技術(shù)背景

• vue2.0
• nuxt.js
• ElementUI

實(shí)際操作

首先不同于vue-cli腳手架在入口main.js里面定義自定義指令，在nuxt.js中，nuxt.config.js作為項(xiàng)目的入口文件和配置文件，定義自定義指令也是在這里定義

我們直接跳到nuxt.config.js的plugins配置項(xiàng)

plugins：該配置項(xiàng)用于配置那些需要在 根vue.js應(yīng)用 實(shí)例化之前需要運(yùn)行的 Javascript 插件。

拿博主項(xiàng)目例子來(lái)看，在plugins文件夾下新建directive.js文件，引入Vue，定義自定義指令

組件中使用，直接在想要默認(rèn)焦點(diǎn)的地方寫入v-focus即可，如下圖：

優(yōu)勢(shì)

一個(gè)字：簡(jiǎn)單 O(∩_∩)O哈哈~

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

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

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

setTimeout(fn, 0) 永遠(yuǎn)的神

這里涉及到JavaScript的EventLoop，簡(jiǎn)單來(lái)講，setTimeout的回調(diào)是異步的，js會(huì)將異步的任務(wù)放在同步任務(wù)后處理。

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

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

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

$nextTick(callback)

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

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

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

小結(jié)

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

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

以上就是Vue自定義指令v-focus實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue自定義指令v-focus的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論