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í)上，只要你在打開這個(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ù)，從而指定被綁定元素的行為。這里我們依葫蘆畫瓢，實(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)好多了！快打開瀏覽器體驗(yàn)一下吧！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vite配置@別名以及讓vscode智能提示路經(jīng)的步驟
這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
electron-vue開發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目,項(xiàng)目中主要用了Flex布局，以及viewport相關(guān)知識(shí)，已達(dá)到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下2018-02-02
Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能
當(dāng)今的Web開發(fā)趨勢(shì)中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來(lái),使得前端和后端可以獨(dú)立進(jìn)行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實(shí)現(xiàn)查詢分頁(yè)功能,需要的朋友可以參考下2024-06-06
vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法，這段代碼主要使用c3平滑屬性實(shí)現(xiàn),需要的朋友可以參考下2019-12-12
vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Vue中用watch一次監(jiān)聽多個(gè)值變化的示例詳解
在Vue中,watch 本身不能監(jiān)聽多個(gè)變量,但我們可以通過(guò)返回具有計(jì)算屬性的對(duì)象然后監(jiān)聽該對(duì)象,從而實(shí)現(xiàn)一次性“監(jiān)聽多個(gè)變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個(gè)值變化的示例,需要的朋友可以參考下2024-01-01
Vue動(dòng)態(tài)類的幾種使用方法總結(jié)
這篇文章主要介紹了Vue動(dòng)態(tài)類的幾種使用方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在Vue中進(jìn)行數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁(yè)是一個(gè)常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)據(jù)分頁(yè),本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁(yè),以及如何設(shè)計(jì)一個(gè)通用的分頁(yè)組件,需要的朋友可以參考下2023-10-10