Vue自定义按键修饰符：第二天

在很多时候，我们想要在键盘上按一个指定的键，实现，新增，删除的目的，比如按一下回车键，就要实现新增数据的目的

这样我们就需要监听键盘事件。比如 keydown：按键按下，keyup：按键抬起，keypress：按键按下抬起

在Vue中允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm实例中的submit方法`  这个13对应的键其实就是Enter回车键-->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上：这个enter就是键盘码13的别名 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

Vue默认为我们提供了如下键盘码的别名：

.enter（回车键）
.tab（Tab键）
.delete (捕获“删除”和“退格”键)
.esc（Esc按键）
.space（空格键）
.up（方向上键）
.down（方向下键）
.left（方向左键）
.right（方向右键）

案例：

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--当空格键按下并已经抬起的时候，调用add方法-->
        Esc键<input type="text" v-model="name" v-on:keyup.esc="add(name)" />
        <!--esc是键盘码27的别名，所有可以下面直接用键盘码27 效果样-->
        Esc键<input type="text" v-model="name" v-on:keyup.27="add(name)" />

        <!--当Del键按下的时候，调用Del方法-->
        Del键<input type="text" v-model="name" v-on:keydown.delete="Del(name)" />


        <!--当空格键按下并即将抬起的时候，调用add方法-->
        <!--keypress对中文输入法支持不好，可能无法响应中文输入;无法响应系统功能键（如delete，backspace等等）-->
        <!--经过测试：keypress无法绑定 Esc，方向键,Tab键，Del键-->
        <!--keypres对space空格键支持，因为空格键不属于系统功能键-->
        空格键<input type="text" v-model="name" v-on:keypress.space="add(name)" />
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                name: '',
            },
            methods: {
                add: function (name) { alert(name) },
                Del: function (name) { alert(name) }
            },
            filters: {
            }
        })
    </script>
</body>
</html>

如果对Vue提供的键盘码别名觉得不够用，我们可以直接用按键事件来绑定键盘码keyCode。但是键盘码keyCode全是数字，很难记，也不直观。所以我们还可以给键盘码自定义的设定别名。

案例：例如，我为113这个键盘码起个别名，例如叫F2

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--当F2键按下并抬起后，触发add事件方法-->
        自定义按键F2<input type="text" v-model="name" v-on:keyup.F2="add(name)" />
    </div>

    <script>
        //自定义全局键盘码别名（自己定义全局按键修饰符）
        Vue.config.keyCodes.F2 = 113;

        var vm = new Vue({
            el: "#app",
            data: {
                name: '',
            },
            methods: {
                add: function (name) { alert(name) },                
            },
            filters: {
            }
        })
    </script>
</body>
</html>

Vue自定义按键修饰符：第二天

案例：

猜你喜欢