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

更新時間：2018年08月25日 11:12:18 作者：大灰狼的小綿羊哥哥

今天小編就為大家分享一篇vue-auto-focus: 控制自動聚焦行為的 vue 指令方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在網(wǎng)頁的表單中，經(jīng)常需要用程序來控制input和textarea的自動聚焦行為。例如我最近做的一個項目，有個裝箱出庫的流程，input框自動聚焦的流程如下：頁面進入時自動聚焦到訂單號輸入框->訂單號掃描完畢聚焦到商品條碼輸入框->掃描完一個商品條碼后依然停留在條碼輸入框->所有條碼掃描完畢聚焦到訂單號輸入框。

為了應付這種需求，就做了這個指令，github地址： vue-auto-focus ，歡迎star。

example

<template>
 <form v-auto-focus="focusCtrl" :data-current="currentIndex" :data-action="actionType">
  <input @focus="setFocusIndex(0)" type="text" data-index="0">
  <input @focus="setFocusIndex(1)" type="text" data-index="1">
  <textarea @focus="setFocusIndex(2)" name="" id="" cols="30" rows="10" data-index="2"></textarea>
  <input @focus="setFocusIndex(3)" type="text" data-index="3">
 </form>
</template>
<style scoped>
</style>
<script type="text/babel">
 export default {
  data() {
   return {
    focusCtrl: 0, // 自動聚焦控制,變動時,執(zhí)行自動聚焦指令
    currentIndex: 0, // 當前聚焦元素的索引
    actionType: 'next', // 自動聚焦的行為類型
   }
  },
  methods: {
   /**
    * 控制自動聚焦指令執(zhí)行
    * @param actionType {string} 自動聚焦類型 it can be 'next'/'prev'/'first'/'last'/'jump'
    * @param index {string} 當actionType為'jump'時,需要傳入將要聚焦元素的索引
    **/
   setFocus(actionType,index) {
    if (actionType === 'jump') {
     this.currentIndex = index
    }
    this.focusCtrl++
    this.actionType = actionType
   },
   /**
    * 元素聚焦時,獲取當前聚焦元素的索引
    * @param index {number} 當前聚焦的索引
    **/
   setFocusIndex(index) {
    this.currentIndex = index
   },
  }
 }
</script>

行為控制

next 聚焦到下一個元素

prev 聚焦到上一個元素

first 聚焦到第一個元素

last 聚焦到最后一個元素

jump 聚焦到指定的元素

聚焦行為控制邏輯

/**
 * 聚焦行為控制
 * next 聚焦到下一個元素
 * prev 聚焦到上一個元素
 * first 聚焦到第一個元素
 * last 聚焦到最后一個元素
 * jump 跳轉到指定的元素
 * @param el
 */
const focusCtrl = function (el) {
 const action = el.dataset.action
 const allFocusEls = getAllFocusEls(el)
 const focusLen = allFocusEls.length
 let current = getTargetIndex(el,allFocusEls)
 switch (action) {
  case 'next': // 如果action為next,則聚焦到下一個輸入框
   if (current >= focusLen - 1) {
    current = focusLen - 1
   } else {
    current++
   }
   autoFocus(allFocusEls[current])
   break
  case 'prev': // 如果action為prev,則聚焦到上一個輸入框
   if (current <= 0) {
    current = 0
   } else {
    current--
   }
   autoFocus(allFocusEls[current])
   break
  case 'first': // 如果為first,則聚焦到第一個輸入框
   current = 0
   autoFocus(allFocusEls[current])
   break;
  case 'last': // 如果為last,則聚焦到最后一個輸入框
   current = focusLen - 1
   autoFocus(allFocusEls[current])
   break
  case 'jump': // 如果為jump,則獲取focusIndex,跳轉到對應的輸入框
   if (current >= 0 && current < focusLen) {
    autoFocus(allFocusEls[current])
   }
   break
 }
}

必須在需要控制的元素上添加data-index屬性，需要在父元素上添加data-action屬性和data-current屬性，data-action為指令行為的類型（值為next,prev等），data-current為當前聚焦元素的data-index值， getAllFocusEls 方法其實就是獲取所有屬性為data-index的元素，代碼如下：

/**
 * 獲取需要聚焦的所有元素
 * @param el {Node} 指令掛載的元素
 * @returns {NodeList} 需要聚焦的元素列表
 */
const getAllFocusEls = function (el) {
 return el.querySelectorAll('[data-index]')
}

getTargetIndex 方法用來獲取當前聚焦元素的在集合中的索引值，代碼如下：

/**
 * 獲取當前聚焦元素在集合中的位置
 * @param el
 * @param collection
 * @returns {number}
 */
const getTargetIndex = function(el,collection) {
 const target = document.querySelector(`[data-index="${el.dataset.current}"]`)
 return Array.from(collection).indexOf(target)
}

inserted

指令掛載時，自動聚焦到指定的元素

/**
 * 進入頁面時,根據(jù)設置的data-index索引值,聚焦到對應的輸入框
 * @param el
 */
inserted: function (el) {
 const allFocusEls = getAllFocusEls(el) // 獲取需要聚焦的input元素組
 let current = getTargetIndex(el,allFocusEls)
 if (!current || current < 0 || current >= allFocusEls.length) { // 如果沒有設置data-current,或者current的數(shù)值范圍不符合要求,則默認聚焦到第一個輸入框
  current = 0
 }
 const currentEl = allFocusEls[current]
 autoFocus(currentEl)
},

update

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

/**
 * 更新時,如果focusCtrl有變動,則根據(jù)actionType來判斷聚焦的行為,聚焦到對應的元素
 * @param el
 * @param value
 * @param oldValue
 */
update: function (el,{value,oldValue}) {
 if (value !== oldValue) {
  focusCtrl(el)
 }
},

以上這篇vue-auto-focus: 控制自動聚焦行為的 vue 指令方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: