Vue 回顧之指令（關於input自動聚焦的問題）

阿新 • • 發佈：2019-01-03

用了Vue也一年多了，雖然對大部分內容都比較熟悉，但有些用法可能會起到意想不到的作用。

今天在做一個關於抽獎的需求，要求是每次點選編輯按鈕顯示編輯框，要求自動聚焦。

一開始想到了autofocus屬性，結果發現每次只有重新整理頁面的第一次會生效，之後無論怎麼點選都不能自動聚焦，於是網上查了很多資料，

最終問題指向了vue的指令，因此先回過頭看看vue的指令部分。

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

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

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

如果想註冊區域性指令，元件中也接受一個 directives 的選項：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
 el.focus()
 }
 }
}

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

<input v-focus>

好了，問題看似得到了解決。但在具體的專案中，我們在inserted中拿到的el可能不是input節點（比如直接使用了第三方元件庫），這時就需要遍歷el的childNode屬性，獲得我們

想要的input元素引用，從而呼叫focus方法。

至此，問題圓滿解決。