10.v-on:keyup自定义按键修饰符

最新推荐文章于 2022-06-04 21:01:53 发布

code_dream_wq

最新推荐文章于 2022-06-04 21:01:53 发布

阅读量237

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110163972

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

自定义按键修饰符别名

- 在Vue中可以通过`config.keyCodes`自定义按键修饰符别名

<div id="app">
    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
	
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

那怎么知道f5的值是多少呢，我们可以通过打印event.keyCode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-on:keyup.aaa='handle' v-model='info'>
	<input type="text" v-on:keyup='handle0' >
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
   //a的keyCode 是 65 
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
      el: '#app',
      data: {
        info: ''
      },
      methods: {
        handle: function(event){
          console.log(event.keyCode)
        },
		handle0: function(event){
			 /* 这边打印出按键的keyCode*/
		  console.log(event.keyCode)
		}
      }
    });
  </script>
</body>
</html>

code_dream_wq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.v-on:keyup自定义按键修饰符

自定义按键修饰符别名- 在Vue中可以通过`config.keyCodes`自定义按键修饰符别名<div id="app"> 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 <input type="text" v-on:keydown.f5="prompt()"></div><script> Vue.config.keyCodes.f5 = 116;
复制链接

扫一扫