vue16 自定义键盘属性
2024-09-08 03:55:28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown.c="show">
<input type="text" @keydown.enter="show">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
//ctrl->17
/*document.onkeydown=function(ev){
console.log(ev.keyCode);
};*/
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown.17="show">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
//ctrl->17
/*document.onkeydown=function(ev){
console.log(ev.keyCode);
};*/
Vue.directive('on').keyCodes.ctrl=17; //17起了别名叫ctrl
Vue.directive('on').keyCodes.myenter=13; window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
},
methods:{
show:function(){
alert(1);
}
}
});
}; </script>
</head>
<body>
<div id="box">
<input type="text" @keydown.ctrl="show">
<input type="text" @keydown.myenter="show">
<input type="text" @keydown.myenter="show | debounce 2000">
</div> </body>
</html>
最新文章
- JAVA 序列化
- 【笔记】android sdk集成的eclipse中导入项目
- SVN更改登录用户
- PHP header函数的几大作用
- Leetcode: Max Sum of Rectangle No Larger Than K
- 6. ActionBar详解
- Helpers\Assets
- Tag标签系统设计
- Android HAL
- c++ 常见问题之 vector 和数组
- python2.x 使用protobuf
- 怎用不用工具创建一个javaWeb项目
- servlet文件上传及下载
- SpringBoot系列: Spring项目异常处理最佳实践
- css继承属性
- C++实验七
- ORACLE结构体系篇之表空间详解.md
- Servlet的5种方式实现表单提交
- 什么是Unicode
- 批处理--批量打开程序&批量关闭程序