Vue-按键修饰符(默认按键修饰符和自定义按键修饰符)
2019-05-17 本文已影响0人
瑟闻风倾
1. 默认(系统)按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- v-on监听键盘事件的修饰符有：enter、detete、tab、esc、up、down、left、right和单个字母等 -->
<input type="text" placeholder="请输入名称" v-model="name" @keydown.enter="showDialog1">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:""
},
methods:{
showDialog1:function(){
alert("默认的按键修饰符起作用");
}
}
});
</script>
</html>
2. 自定义按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入编号" v-model="id" @keydown.f2="showDialog2">
<button @click="addData">添加</button><br/>
</div>
</body>
<script type="text/javascript">
/*自定义按键修饰符f2：在Vue1.0中默认按键修饰符存放在Vue.directive("on").keyCodes，而在Vue2.0中默认按键修饰符存放在Vue.config.keyCodes*/
Vue.directive("on").keyCodes.f2 = 113;//键盘中按键f2对应的键码值keyCodes，可通过百度查找JS中键盘每个按键对应的keyCodes来获取
/*查看v-on指令中预定义的所有按键修饰符*/
console.log(Vue.directive("on").keyCodes);
var vm = new Vue({
el:"#app",
data:{
name:""
},
methods:{
showDialog2:function(){
alert("自定义的按键修饰符起作用");
}
}
});
</script>
</html>
