vueenter键触发（vue触发子组件方法）

本篇文章给大家谈谈vueenter键触发，以及vue触发子组件方法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue事件修饰符和键盘事件
• 2、elementui+vue输入框回车事件与失去焦点事件重叠
• 3、vue+elementUI的el-form的回车键登录，监听键盘来触发事件
• 4、Vue的键盘事件
• 5、vue监听移动端软件键盘搜索（enter）事件

vue事件修饰符和键盘事件

修饰符

vue.js为v-on提供了多个修饰符，方便我们处理一些DOM事件的细节，并且修饰符可以串联使用。主要的修饰符如下：

. stop  相当于js中的event.stopPropagation(),它是敏运用来阻止冒泡的；

.prevent 相当于js中event.preventDefault(),它是用来阻止默认行为的；

.capture  捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件；

.self  只有点击当前元素时候，才会触发事件处理函数

.once  只会触发一次

a v-on:click.stop="doThis"/a

form v-on:submit.prevent="onSubmit"/form

a v-on:click.stop.prevent="doThat"/a

form v-on:submit.prevent/form

div v-on:click.capture="doThis".../div

div v-on:click.self="doThat".../div

a v-on:click.once="doThis"/a

除了事件修饰逗者符之外，v-on还提供了按键修饰符，方便我们监听键盘事件中的按键。例如：

input v-on:keyup.13="submitFn" / 桥指梁监听input的输入，当输入回车时触发submitFn函数（回车的keycode值为13），用于处理常见的用户输入完直接按回车提交。

vue.js给一些常用的按键名提供了别称，这样就省去了一些记keyCode的事件。常用按键码别名为：

need-to-insert-img

刚才的input v-on:keyup.13="submitFn" /可以改为

input v-on:keyup.enter="submitFn" /

[img]

elementui+vue输入框回车事件与失去焦点事件重叠

产生的bug：点局简滑击回车桐腊提示信息重叠

原因：点击回车同时触发回车事件和失去焦点事件

解决办法：在回车事件中调用失去焦咐丛点事件

@keyup.enter.native="$event.target.blur"     

@blur="handleInputConfirmTwo"

vue+elementUI的el-form的回车键登录，监听键盘来触发事件

参考资料：

1.当只有一个el-input的时候，可以用elementUI的自带的回车键触发缺败提交事件

但是有时明搭候会同时触发刷新页激扮拿面，这样可以在el-form上添加@submit.native.prevent来解决

2.使用回车键enter来进行登录，在登录按钮上面添加native-type=“submit”

Vue的键盘事件

1、Vue 中的按键别名：

回车 = enter

删除 = delete （捕获‘删除’和‘退格’键）

退出袭信 = esc

空格 = space

换行 = tab

上 = up

下 =down

左 = left

右 = right

2、Vue未提供别名的按键，可以使用按键原始的 key 值 去绑定，但是需要注意转换用短横线命名（比如：键盘上的：CAPSLOCK 。就需要转换为：caps-lock）

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

4、也可以使用燃粗 keyCode 去指定具体的按键（不推荐拍段轮）

keyCode MDN

5、 Vue.config.keyCodes.自定义的键名 = 键码 也可以定制按键别名

vue监听移动端软件键盘搜索（enter）事件

vue中监听手机键盘的【完成】或【搜索】按钮触发事件，需要两个条件

1.form表单，输入隐宽框

2.@keyup.13 事件 或弯升者 直接@keyup 然灶闹亮后事件的处理函数里判断 event.keyCode === 13

关于vueenter键触发和vue触发子组件方法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。