vue中键盘事件的触发

1:我们已经知道,vue中事件的基本使用就是 加上@click ,举个简单例子给按钮添加点击事件:

<button @click="show">点我提示信息1(不传参)</button>
<button @click="shows($event,66)">点我提示信息2(传参)</button>

2:那么如何给键盘添加一个事件呢?

还是这样,再举个例子,我们给输入框绑定一个简单的回车事件。

<input type="text" placeholder="按下回车提示输入" @keydown.enter="show">

那么keydown就是说键盘敲下时就触发,那如果想键盘敲下,然后手离开时再触发时我们就会用到keyup。

3:常见的键盘事件。

                            回车 => enter

                            删除 => delete (捕获“删除”和“退格”键)

                            退出 => esc

                            空格 => space

                            换行 => tab (特殊,必须配合keydown去使用)

                            上 => up

                            下 => down

                            左 => left

                            右 => right

前面3点提到的已经满足普遍需求。

4:如何使用键盘中其他的按键绑定事件呢?

还是一样的,这里我们用一个字母M的按键举例子,可能有人会认为那应该就是键盘上的字母来命名吧,这样写:keydown.M其实这是不对的。因为Vue未提供别名的按键,但是我们可以使用按键原始的key值去绑定。键盘上每个按键都有他的编码。

那么应该怎么做?

拿到按键的key 首先弄个输入框绑定键盘事件。

<input type="text" placeholder="输入你想得到的key的按键" @keydown="showInfo">

然后我们在方法中,这样做 控制台就可以拿到这个值,之后再把这个值加到你的 keydown或者

keyup上。

			methods: {
				showInfo(e){
					console.log(e.key,e.keyCode)				
				}
			}

值得注意到的是:大小写的需要做转换:即多个单词的需要转换成小写并且加-

如:大小写:kebab-case(短横线命名)

5:

系统修饰键(用法特殊):ctrl、alt、shift、meta

                            (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。

                            (2).配合keydown使用:正常触发事件。

6:Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

猜你喜欢

转载自blog.csdn.net/weixin_50656154/article/details/125770182