vue键盘指令

153 阅读1分钟

vue中常用的按键别名

1. 回车=>.enter
2. 删除=>.delete(捕获“delete”和“backspace”键)
3. 退出=>.esc
4. 空格=>.space
5. 换行=>.tab(在使用tab时需要使用keydown)
6. 上=>.up
7. 下=>.down
8. 左=>.left
9. 右=>.right

如果想使用其他没有别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

系统修饰键特殊用法:ctrl、alt、shift、meta(win键)

1. 配合keyup使用:按下修饰符的同时,在按下其他键,随后释放其他键,事件才被触发(组合使用)
2. 配合keydown使用:正常触发事件
3.如果想要指定与某个键组合使用可以在后面加上做指定按键(.ctrl.y)

也可以使用keyCode去指定具体的按键(不推荐,即将被废除)

vue.config.keyCode.自定义键名=键码。可以去定制按键别名(同样不推荐,因为不同键盘对应的键值有可能不相同)

<div id="root">
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        Vue.config.keyCodes.huiche=13
        new Vue({
            el: '#root',
            data: {
                name: 'word',
            },
            methods: {
                showInfo(e) {
                    //console.log(e.key,e.keyCode)//获取按键名和对应编码
                    // console.log(e.target.value)
                }
            }
        })
    </script>