有时候网页会有这样的需要,当敲击回车的时候代替点击button按钮
比如:在登陆的时候,不需要点击登录按钮,实现用敲击回车的方式也能够登陆
点击查看vue官方提供的按键修饰符 vue修饰符
官方提供的有 .enter .table(捕获table) .sapce(捕获空格) .delete(捕获删除和退格) .esc 小键盘区域的上下左右.up .down .left .right
自定义按键修饰符 语法
Vue.config.keyCodes.自定义名称 = 键盘码 注:一般情况 , 自定义的名称和键盘码的对应关系一致
键盘码对应关系请 点击查看 键盘码
下面是按键修饰符的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../util/vue-2.4.0.js"></script>
</head>
<body>
<!-- vue对应的按键事件绑定是 v-on:keyup.自定义按键变量 或者 @keyup.自定义按键变量 ,这里按键变量就是f2-->
<!-- 在input输入框里面添加键盘事件,当键盘按下f2的时候会发出113键盘码,自定义的按键事件f2可以捕捉到113键盘码-->
<div id="test">
<input type="text" @keyup.f2="show" @keyup.enter="show"/>
<!-- 注意keyup事件只能用在input里面-->
<!-- 而且只有光标在input里面的时候输入按键会触发-->
<!-- 在登陆界面,你可以为所有需要输入的input都设置keyup事件-->
<input type="button" @click.prevent="show" value="button"/> <br/>
<p>
点击button按钮,查看弹窗, <br/>
或者
</p>
</div>
<script>
Vue.config.keyCodes.f2 = 113;
var vm1 = new Vue({
el:"#test",
methods:{
show: function () {
alert("登陆成功")
}
}
});
</script>
</body>
</html>
