溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們希望用戶雙擊 todo 進入編輯狀態后輸入框自動獲取焦點，而不是需要先手動點一下。input 元素有一個 focus 方法可以來幫我們完成這個事情，但現在的問題是如何在 Vue 中獲得這個 input 元素，從而來操作它。Vue 的自定義指令可以完成這個功能。
我們先來看看 Vue 官網的一個示例：
然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。舉個聚焦輸入框的例子，如下：
一個輸入框：
當頁面加載時，該元素將獲得焦點 (注意： autofocus 在移動版 Safari 上不工作)。事實上，只要你在打開這個頁面后還沒點擊過任何內容，這個輸入框就應當還是處于聚焦狀態。現在讓我們用指令來實現這個功能：
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } })
如果想注冊局部指令，組件中也接受一個 directives 的選項：
directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } }
指令是什么，就是用來指導被綁定的元素的行為，我們之前接觸過 v-if、v-model、v-bind 等指令，官方文檔說的非常清楚，我們可以自己注冊一個指令，然后實現某些鉤子函數，從而指定被綁定元素的行為。這里我們依葫蘆畫瓢，實現一個 focus 指令，這個指令實現了 inserted 鉤子函數，這個函數在被綁定的元素被插入 dom 時觸發，且被綁定的元素會作為參數傳入鉤子函數，我們就可以在函數中對它操作。
我們在 Vue 對象中聲明局部指令：
<script>
let id = 0; // 用于 id 生成
var app = new Vue({
...
methods: {
...
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
})
</script>
然后就可以使用這個指令了，把它綁定到編輯框，這樣編輯框出現時指令就被觸發，從而聚焦。
<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)"/>
注意因為元素一旦出現一定要聚焦的，所以條件始終為 true。
現在用戶體驗好多了！快打開瀏覽器體驗一下吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
