VUE框架自定义按键修饰符和系统修饰符在实际开发中的作用解析与效果实现------VUE框架

落日映苍穹つ 2024-02-17 11:16 55阅读 0赞

> ###  ###
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="js/vue.js"></script>
>     </head>
>     <body>
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>             
>             
>             
>             回车键<input type="password" v-on:keyup.enter="getInfo" placeholder="密码1">
>             <br>
>             回车键<input type="password" v-on:keyup.13="getInfo" placeholder="密码2">
>             <br>
>             
>             
>             tab键<input type="password" v-on:keydown.tab="getInfo">
>             <br>
>             
>             delete<input type="password" v-on:keyup.delete="getInfo">
>             <br>
>             
>             esc<input type="password" v-on:keyup.esc="getInfo">
>             <br>
>             
>             space<input type="password" v-on:keyup.space="getInfo">
>             <br>
>             
>             上<input type="password" v-on:keyup.up="getInfo">
>             <br>
>             
>             下<input type="password" v-on:keyup.down="getInfo">
>             <br>
>             
>             左<input type="password" v-on:keyup.left="getInfo">
>             <br>
>             
>             右<input type="password" v-on:keyup.right="getInfo">
>             <br>
>             
>             
>             
>             
>             ctrl的keydown<input type="password" v-on:keydown.ctrl="getInfo">
>             <br>
>             ctrl的keyup<input type="password" v-on:keyup.ctrl="getInfo">
>             <br>
>             
>             ctrl的keyup控制效果版本<input type="password" v-on:keyup.ctrl.i="getInfo">
>             <br>
>         </div>
>         <script>
>             // 通过我们的VUE.config.keyCodes就可以自定义按键修饰符
>             // Vue.config.keyCodes.按一下 = 13;
>             // 系统修饰键
>             // ctrl alt shift meta
>             // 对于keydown来说,只要按下ctrl键就会触发
>             // 对于keyup来说,需要按下ctrl和组合键才能触发
>     
>             const vm = new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello"
>                 },
>                 methods : {
>                     getInfo : function(event)
>                     {
>                         // 识别到键入的值是13代表用户按下了回车键
>                         // if(event.keyCode === 13)
>                         // {
>                             // event是当前发生的事件,我们通过target可以获取事件对象
>                             // 再通过事件对象的value获取用户文本框内的信息
>                             console.log(event.key);
>                         // }
>                     }
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> 
> 
> 
> 
> 回车键<input type="password" v-on:keyup.enter="getInfo" placeholder="密码1">
> 
> <br>
> 
> 回车键<input type="password" v-on:keyup.13="getInfo" placeholder="密码2">
> 
> <br>
> 
> 
> 
> 
> 
> tab键<input type="password" v-on:keydown.tab="getInfo">
> 
> <br>
> 
> 
> 
> delete<input type="password" v-on:keyup.delete="getInfo">
> 
> <br>
> 
> 
> 
> esc<input type="password" v-on:keyup.esc="getInfo">
> 
> <br>
> 
> 
> 
> space<input type="password" v-on:keyup.space="getInfo">
> 
> <br>
> 
> 
> 
> 上<input type="password" v-on:keyup.up="getInfo">
> 
> <br>
> 
> 
> 
> 下<input type="password" v-on:keyup.down="getInfo">
> 
> <br>
> 
> 
> 
> 左<input type="password" v-on:keyup.left="getInfo">
> 
> <br>
> 
> 
> 
> 右<input type="password" v-on:keyup.right="getInfo">
> 
> <br>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> ctrl的keydown<input type="password" v-on:keydown.ctrl="getInfo">
> 
> <br>
> 
> ctrl的keyup<input type="password" v-on:keyup.ctrl="getInfo">
> 
> <br>
> 
> 
> 
> ctrl的keyup控制效果版本<input type="password" v-on:keyup.ctrl.i="getInfo">
> 
> <br>
> 
> </div>
> 
> <script>
> 
> // 通过我们的VUE.config.keyCodes就可以自定义按键修饰符
> 
> // Vue.config.keyCodes.按一下 = 13;
> 
> // 系统修饰键
> 
> // ctrl alt shift meta
> 
> // 对于keydown来说,只要按下ctrl键就会触发
> 
> // 对于keyup来说,需要按下ctrl和组合键才能触发
> 
> const vm = new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello"
> 
> \},
> 
> methods : \{
> 
> getInfo : function(event)
> 
> \{
> 
> // 识别到键入的值是13代表用户按下了回车键
> 
> // if(event.keyCode === 13)
> 
> // \{
> 
> // event是当前发生的事件,我们通过target可以获取事件对象
> 
> // 再通过事件对象的value获取用户文本框内的信息
> 
> console.log(event.key);
> 
> // \}
> 
> \}
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>