天天看點

vue-auto-focus: 控制自動聚焦行為的 vue 指令

在網頁的表單中,經常需要用程式來控制input和textarea的自動聚焦行為。例如我最近做的一個項目,有個裝箱出庫的流程,input框自動聚焦的流程如下:頁面進入時自動聚焦到訂單号輸入框->訂單号掃描完畢聚焦到商品條碼輸入框->掃描完一個商品條碼後依然停留在條碼輸入框->所有條碼掃描完畢聚焦到訂單号輸入框。為了應付這種需求,就做了這個指令,github位址:vue-auto-focus,歡迎star。

next 聚焦到下一個元素

prev 聚焦到上一個元素

first 聚焦到第一個元素

last 聚焦到最後一個元素

jump 聚焦到指定的元素

必須在需要控制的元素上添加data-index屬性,需要在父元素上添加data-action屬性和data-current屬性,data-action為指令行為的類型(值為next,prev等),data-current為目前聚焦元素的data-index值,<code>getAllFocusEls</code>方法其實就是擷取所有屬性為data-index的元素,代碼如下:

<code>getTargetIndex</code>方法用來擷取目前聚焦元素的在集合中的索引值,代碼如下:

指令挂載時,自動聚焦到指定的元素

通過指令的value值控制指令的執行,如果值有變動,則執行指定的操作,聚焦到指定的元素