vue怎么写键盘事件
vue容许将按键值作为修饰符来应用,如监听回车事件,有两种写法,如下代码:
但要留神的是:当咱们在在el-input采纳如上两种写法时,他是不失效的。el-input监听不到键盘事件,起因是element-ui是封装组件,所以el标签属于自定义标签,因而触发不了键盘事件。
解决办法:加上.native原生事件修饰符即可。.native:监听组件根元素的原生事件,次要作用是给自定义的组件增加原生事件。
vue与elementUI中给el-input绑定键盘按键代码如下:
店铺名称
罕用按键修饰符
别名修饰符
键值修饰符
对应按键
.delete
.8/.46
回格/删除
.tab
.9
制表
.enter
.13
回车
.esc
.27
退出
.space
.32
空格
.left
.37
左
.up
.38
上
.right
.39
右
.down
.40
下
鼠标按键修饰符
别名修饰符
可用版本
对应按键
.left
2.2.0以上
左键
.right
2.2.0以上
右键
.middle
2.2.0以上
中键
零碎按键修饰符
别名修饰符
可用版本
对应按键
.ctrl
2.1.0以上
Ctrl键
.alt
2.1.0以上
Alt键
.shift
2.1.0以上
Shift键
.meta
2.1.0以上
meta键(Windows零碎上为田键)
对于组合修饰符的应用:
vue为咱们提供了组合修饰符的机制,然而它的应用,必须配合零碎按键修饰符才能够失效。如下是一段测试代码:
带上ctrl来找我玩呀
let vm = new Vue({
el: '#app',
methods: {
together(event) {
if (!event.ctrlKey) {
console.log('------------- 我是可恶的分割线呀 -------------')
console.log('$event.ctrlKey:', event.ctrlKey)
} else {
console.log('欢送呀!')
}
},
ctrlClick(event) {
console.log('------------- 我是可恶的分割线呀 -------------')
console.log('$event.ctrlKey:', event.ctrlKey)
console.log('Ctrl你来了呀!')
}
}
})