vue的简单使用6-自定义按键修饰符

在制作网页的时候，常常会使用到各种键盘事件

例如keyUp,当发生键盘抬起的事件时，会被触发，那怎么让其只在特定的按键抬起时才触发呢？

上个例子

<div id="head">
    <input @keyDown="mi">
    <p>{{ msg }}</p>
</div>
<script>
    let vue1 = new Vue({
        el: '#head',
        data: {
            msg: ""
        },
        methods: {
            mi: function () {
                alert("林铠戈")
            }
        }
    });
</script>

上面的例子中，给input绑定了键盘事件，当按下键盘时，就会触发keyDown事件，就会执行函数mi,弹出‘林铠戈’，

按下任意键

vue的简单使用6-自定义按键修饰符

修改一下上面的代码

<div id="head">
    <input @keyDown.enter="mi">
    <p>{{ msg }}</p>
</div>

在@keyDown后加上.enter，意思就是只有在enter键按下的时候才会触发这个事件

按下enter键后截图：

vue的简单使用6-自定义按键修饰符

之所以可以使用.enter的来代表回车键，是因为在Vue中内置了一些全局按键修饰符，实际上每个键都有个键码，例如f2的键码是113，

再来修改一下上面的代码：

<div id="head">
    <input @keyDown.113="mi">
    <p>{{ msg }}</p>
</div>

把enter改为113,113代表的就是f2键，所以当f2键按下时才会触发事件。

Vue中内置的全局按键修饰符有：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

在Vue中自定义全局按键修饰符：

//f2就是修饰符，113就是键码
Vue.config.keyCodes.f2 = 113;

自定义全局按键修饰符后接着修改上面的代码：

<div id="head">
    <input @keyDown.f2="mi">
    <p>{{ msg }}</p>
</div>
<script>
    Vue.config.keyCodes.f2 = 113;
    let vue1 = new Vue({
        el: '#head',
        data: {
            msg: ""
        },
        methods: {
            mi: function () {
                alert("林铠戈")
            }
        }
    });
</script>

当按下f2键后就会弹出’林铠戈‘，如果把*Vue.config.keyCodes.f2 = 113;*删除后再运行，按下f2键后不会有反应

vue的简单使用6-自定义按键修饰符

相关推荐