为什么要绑定快捷键呢？？？
因为某个页面使用某个功能较多，鼠标点击不方便，所以用快捷键来改善用户体验
为了防止按下快捷键触发多次的情况，需要将keydown和keyup都绑定
1.设置一个全局的变量：
data(){
return{
triggerFlag:false,
arrKey:[],
forbidKeyboard:false //定义此变量：点击页面其他按钮的时候this.forbidKeyboard=true，取消快捷键
}
}
2.在methods里面写入两个新的函数 handleKeyDown和handleKeyUp
methods:{
handleKeyDown(e) {
let that = this
if (that.arrKey.length > 0) {
// a-z的按键 长按去重
if (that.arrKey.indexOf(e.key.toLowerCase()) >= 0) {
return
}
}
that.arrKey.push(e.key.toLowerCase())
this.keydown = that.arrKey.join('+')
// 监听按键捕获
if (this.keydown == 'shift+s') {
if (that.forbidKeyboard) {
e.preventDefault()
return
}
this.keydown = ''
//在这里面写你要用快捷键做的事情
//that.deleteAll()
e.preventDefault()//取消浏览器原有的操作
}
},
handleKeyUp(e) {
this.arrKey.splice(this.arrKey.indexOf(e.key.toLowerCase()), 1)
this.keydown = this.arrKey.join('+')
e.preventDefault()
},
},
3.在created周期中用EventListener监听事件keydown和keyup
created() {
document.addEventListener('keydown', this.handleKeyDown)
document.addEventListener('keyup', this.handleKeyUp)
},
4.一定要记得在离开页面时在destroyed周期中销毁用EventListener监听的keydown和keyup两个事件，否则快捷键会一直绑定。
销毁！！！（切记：一定要销毁！！！）
destroyed() {
document.removeEventListener('keydown', this.handleKeyDown)
document.removeEventListener('keyup', this.handleKeyUp)
}
