---

前言

在瀏覽器掃描條形碼獲取條形的值，再操作對應的邏輯。這是比較常見的業務，這里記錄實際操作。

其中PC端用的是elmentui-plus，mobile端用的vant-ui

---

一、需求：交互細節

這里用的都是input框。
1.直接掃碼條形碼后，獲取到條形的值。處理相應邏輯。有的是跳轉頁面，有的是繼續掃碼，繼續掃碼這里就要input框的值要清零。
2.在當前頁面，可以支持是否選擇自動聚焦到Input框。
3.支持手動輸入
4.都是把英文轉為大寫，前面空格去掉。
5.支持點擊tab，enter鍵盤后觸發。
6. input的值輸入后，立即Disable input框，這里防止異步操作還沒完成，狀態更新不及時。

二、具體實現

這里是vantui的代碼

        <van-fieldref="BarCodeRef"class="custom-barcode-input"v-model="variable.BarCode"placeholder="Scan BarCode"@input="BarCodeChange"@keyup.enter="BarCodeChangeImmediate"@keydown.tab="BarCodeChangeImmediate"/>

其中BarCodeChange需要用debounce ，如果沒有加debounce 的話，掃碼405 的條形碼，掃到4的時候 @input 了 就立即觸發 了。

兩個核心的函數：

BarCodeChange :

 const BarCodeChange = () => {console.log('Code:',variable.BarCode)if (isHasCalledImmediate.value) {isHasCalledImmediate.value = falsereturn}BarCodeChangeImmediate(false)}

BarCodeChangeImmediate :

const BarCodeChangeImmediate = async (isImmediate: boolean = true) => {console.log('BarCodeChangeImmediate')if (!variable.BarCode) {return}// 有些地方需要立即觸發if (isImmediate) {isHasCalledImmediate.value = true}variable.BarCode = String(variable.BarCode).trim()?.toUpperCase()console.log(variable.BarCode, 'scanVal')// 處理對應的邏輯fun()
}

自動聚焦

清空input的值，并且聚焦。可以考慮抽一個hooks。

const resetBarCodeAdnFocus = () => {let timerId = setTimeout(() => {variable.BarCode = ''BarCodeRef.value?.focus()clearTimeout(timerId)}, 0)
}

三，擴展知識

@input 與 @change的區別

@input 和 @change 是兩個不同的事件，它們的區別在于觸發時機和觸發條件。

@input 事件會在用戶輸入任何內容時都會觸發，包括敲擊鍵盤、鼠標點擊、剪切粘貼等，只要表單元素的值發生變化，就會觸發 @input 事件。

@change 事件只有在表單元素失去焦點時才會觸發，也就是用戶點擊外部區域或按下 Enter 鍵確認輸入時觸發。如果用戶一直保持焦點在表單元素上，即使輸入內容發生變化，也不會觸發 @change 事件。

另外，@input 事件可以實時監聽用戶的輸入內容，而 @change 事件只會在用戶完成輸入并且失去焦點后才會觸發。

因此，如果需要實時獲取用戶輸入內容，可以使用 @input 事件；如果只需要在用戶完成輸入后獲取內容，可以使用 @change 事件。