Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法

我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動(dòng)獲取焦點(diǎn)，而不是需要先手動(dòng)點(diǎn)一下。input 元素有一個(gè) focus 方法可以來(lái)幫我們完成這個(gè)事情，但現(xiàn)在的問(wèn)題是如何在 Vue 中獲得這個(gè) input 元素，從而來(lái)操作它。Vue 的自定義指令可以完成這個(gè)功能。

我們先來(lái)看看 Vue 官網(wǎng)的一個(gè)示例：

然而，有的情況下，你仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。舉個(gè)聚焦輸入框的例子，如下：

一個(gè)輸入框：

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

 // 注冊(cè)一個(gè)全局自定義指令 `v-focus` 

Vue.directive('focus', { // 當(dāng)被綁定的元素插入到 DOM 中時(shí)…… inserted: function (el) { // 聚焦元素 el.focus() } })

如果想注冊(cè)局部指令，組件中也接受一個(gè) directives 的選項(xiàng)：

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

指令是什么，就是用來(lái)指導(dǎo)被綁定的元素的行為，我們之前接觸過(guò) v-if、v-model、v-bind 等指令，官方文檔說(shuō)的非常清楚，我們可以自己注冊(cè)一個(gè)指令，然后實(shí)現(xiàn)某些鉤子函數(shù)，從而指定被綁定元素的行為。這里我們依葫蘆畫(huà)瓢，實(shí)現(xiàn)一個(gè) focus 指令，這個(gè)指令實(shí)現(xiàn)了 inserted 鉤子函數(shù)，這個(gè)函數(shù)在被綁定的元素被插入 dom 時(shí)觸發(fā)，且被綁定的元素會(huì)作為參數(shù)傳入鉤子函數(shù)，我們就可以在函數(shù)中對(duì)它操作。

我們?cè)?Vue 對(duì)象中聲明局部指令：

<script>
  let id = 0; // 用于 id 生成
  var app = new Vue({
    ...
    methods: {
      ...
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    }
  })
</script>

然后就可以使用這個(gè)指令了，把它綁定到編輯框，這樣編輯框出現(xiàn)時(shí)指令就被觸發(fā)，從而聚焦。

<input type="text" 
    value="編輯 todo..."
    v-focus="true"
    v-if="editedTodo!==null && editedTodo.id===todo.id"
    v-model="todo.title"
    @keyup.enter="editDone(todo)"
    @keyup.esc="cancelEdit(todo)"/>

注意因?yàn)樵匾坏┏霈F(xiàn)一定要聚焦的，所以條件始終為 true。

現(xiàn)在用戶體驗(yàn)好多了！快打開(kāi)瀏覽器體驗(yàn)一下吧！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。