在移動端開發(fā)中，監(jiān)聽手機鍵盤輸入是一個非常常見的需求。而 Vue 作為一款流行的前端框架，也為我們提供了多種方式來實現(xiàn)該功能。

最常見的方式是利用 Vue 的自定義指令來實現(xiàn)。我們可以創(chuàng)建一個叫做 v-keyboard 的自定義指令，然后在需要監(jiān)聽鍵盤輸入的元素上使用該指令。

// 自定義指令
Vue.directive('keyboard', {
bind: function (el, binding) {
el.addEventListener('input', binding.value)
}
})
// 使用指令// 對應(yīng)的 Vue 實例方法
methods: {
onKeyboardInput: function (event) {
console.log(event.target.value)
}
}

在上述代碼中，我們通過 bind 鉤子函數(shù)將 input 事件綁定到 el 元素上，并執(zhí)行 binding.value 方法。binding.value 會在使用指令時傳入，即 onKeyboardInput 方法。

另外，我們還可以通過監(jiān)聽 window 對象的 focusin 和 focusout 事件，來判斷是否彈出了鍵盤。這種方式雖然不如自定義指令直接，但是可以適用于更多場景。

// 監(jiān)聽事件
window.addEventListener('focusin', function () {
this.$store.dispatch('setKeyboardStatus', true)
})
window.addEventListener('focusout', function () {
this.$store.dispatch('setKeyboardStatus', false)
})
// 對應(yīng)的 Vuex 方法
mutations: {
setKeyboardStatus: function (state, status) {
state.isKeyboardVisible = status
}
}

在上面的代碼中，我們將 isKeyboardVisible 的值存儲在 Vuex 的狀態(tài)中，并通過 setKeyboardStatus 方法來改變其值。這樣，我們就可以在 Vue 組件中輕松地判斷鍵盤是否彈出。

還有一種情況，就是我們需要在鍵盤彈起時將頁面滾動到輸入框的位置。這個時候，我們可以在鍵盤彈起時觸發(fā)一個滾動事件。

// 監(jiān)聽事件
window.addEventListener('focusin', function () {
var input = document.activeElement
var bottomOffset = this.$refs.container.scrollHeight - input.getBoundingClientRect().bottom
this.$refs.container.scrollTo(0, bottomOffset)
})
// 使用 ref

在上面的代碼中，我們通過 document.activeElement 獲取當(dāng)前活動元素，即獲取到了用戶正在輸入的元素。然后，我們通過 getBoundingClientRect 方法獲取該元素在視口中的位置，計算出需要滾動的距離，并使用 scrollTo 方法實現(xiàn)滾動。

綜上所述，Vue 提供了多種監(jiān)聽手機鍵盤的方式，并能夠適應(yīng)不同的場景需求。我們可以根據(jù)實際情況選擇合適的方式來實現(xiàn)該功能。