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

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

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

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

最終問題指向了vue的指令，因此先回過頭看看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方法。

至此，問題圓滿解決。