自定义按键修饰符Vue.config.keyCode.XX = event.keyCode

最新推荐文章于 2022-06-15 15:03:30 发布

_XinXinM_

最新推荐文章于 2022-06-15 15:03:30 发布

阅读量883

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/112340277

版权

自定义按键修饰符

全局config.keyCodes对象

Vue.config.keyCode.f1 = 112

在Vue.config.keyCodes对象中添加一个自定义的名字，后面跟一个值，这就是自定义的按键修饰符。跟的值是每个按键的唯一标识，每个键都有一个唯一的标识，这个按键值可以通过事件对象keycode来获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <input type="text" v-on:keyup = 'handle' v-model = 'info'>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                info:''
            },
            methods:{
                handle: function(event){
                    console.log(event.keyCode)
                }
            }
        });
    </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>
</head>
<body>
    <div id = "app">
        <input type="text" v-on:keyup.aaa = 'handle' v-model = 'info'>
    </div>
    <script src="vue.js"></script>
    <script>
        /*
        事件绑定-自定义按键修饰符
        规则：自定义按键修饰符名字是自定义的，但是对应的值是按键对应event.keyCode值
        直接用keyCode值也可以但是不直观
        */
        Vue.config.keyCodes.aaa = 65
        var vm = new Vue({
            el:'#app',
            data:{
                info:''
            },
            methods:{
                handle: function(event){
                    console.log(event.keyCode)
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

_XinXinM_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自定义按键修饰符Vue.config.keyCode.XX = event.keyCode

自定义按键修饰符全局config.keyCodes对象Vue.config.keyCode.f1 = 112在Vue.config.keyCodes对象中添加一个自定义的名字，后面跟一个值，这就是自定义的按键修饰符。跟的值是每个按键的唯一标识，每个键都有一个唯一的标识，这个按键值可以通过事件对象keycode来获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫