1. Введение
1.1 Бизнес-сценарий
Страница vue прослушивает такие события, как клавиатура и мышь.
Официальный пример находится вinputВ теге эффект, который мы хотим, состоит в том, чтобы не использовать фиксированный тег.
2 Принцип реализации
2.1 Добавить мониторинг
mounted () {
window.addEventListener('keyup',this.handleKeyup)
window.addEventListener('scroll',this.handleScroll)
},
Это определяет событие при нажатии на клавиатуру и событие при прокрутке колесика мыши.
Здесь вы можете узнать о событиях самостоятельно.
Ключевые слова:
HTML DOM Event
Вы можете обратиться к:W3school учебник для новичков
Здесь согласноaddEventListener(event,function)Применение.
event, обязательный параметр, строка, будьте осторожны, чтобы удалить имя события DOMon
methods:{
// 键盘事件
handleKeyup(event){
const e = event || window.event || arguments.callee.caller.arguments[0]
if(!e) return
const {key,keyCode} = e
console.log(keyCode)
console.log(key)
},
// 滑轮事件
handleScroll(){
var e = document.body.scrollTop||document.documentElement.scrollTop
if(!e) return
console.log(e)
},
}
destroyed () {
window.removeEventListener('keyup',this.handleKeyup)
window.removeEventListener('scroll',this.handleScroll)
},
3 Постскриптум
Спасибо за поддержку.若不足之处，欢迎大家指出，共勉。
Если вы думаете, что это хорошо, не забудьте поставить лайк, спасибо😂
Добро пожаловать, чтобы следовать за мной: 【Гитхаб】【Наггетс】【Краткая книга】[CSDN]【ОЩИНА】【СФ】
В этой статье используетсяCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.