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

ゝ一纸荒年。 2022-02-04 11:06 269阅读 0赞

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

例如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,弹出‘林铠戈’，

按下任意键

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]

修改一下上面的代码

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

按下enter键后截图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]

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

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

把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键后不会有反应

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: /images/20220204/ee860d37416e4903a597d66973b695ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]: /images/20220204/ee51a1d471ca469bb69368436d83867e.png