【前端框架学习】自定义按键修饰符

悠玄烛远

于 2022-01-20 11:47:09 发布

阅读量623

点赞数

分类专栏：前端框架Vue学习文章标签：前端框架 vue.js javascript

本文链接：https://blog.csdn.net/qq_38594872/article/details/122597272

版权

前端框架Vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

观察下面的代码段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入bootstrap-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        import * as Component from 'asoul-ui';
    </script>
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class=" panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name" >
                </label>

                <input type="button" value="添加" class="btn btn-primary" @click="add()">

                <label>
                    搜索名称关键字:
                    <input type="text" class="form-control" v-model="keywords">
                </label>
            </div>
        </div>


        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: 'Jerry', ctime: new Date() },
                    { id: 2, name: 'Tom', ctime: new Date() }
                ]
            },
            methods: {
                add() {
                    var user = { id: this.id, name: this.name, ctime: new Date() };
                    this.list.push(user);
                    this.id = this.name = null;
                },
                del(id) {
                    this.list.some((item, i) => {
                        if (item.id == id) {
                            this.list.splice(i, 1);
                            return true;
                        }
                    });
                },
                search(keywords) {
                    return this.list.filter(item => {
                        if (item.name.includes(keywords)) {
                            return item;
                        }
                    })

                }
            }
        });
    </script>

</body>

</html>

可以发现按钮只存在一个点击事件。但是很多时候，我们输入完数据之后，会习惯性的敲击键盘上的回车键，这个时候就需要再为文本框添加一个回车事件。

我们可以为文本窗口添加一个键盘抬起的事件，即keyup。当敲击键盘的时候，每敲击一下都会执行方法，这样显然是不合理的，所以我们需要为keyup绑定固定的回车键。

<input type="text" class="form-control" v-model="name" @keyup.enter="add()">

这个enter是vue内部提供的，系统为我们提供了一些修饰符，如下所示：

.enter

.table

.delete(捕获删除和退格)

.esc

.space

.up

.down

.left

.right

具体可以参考：事件处理 — Vue.js

如果我们想自定义键盘上的某个按键，可以通过控制键码来实现，具体可以参考：js 里面的键盘事件对应的键码 - 无花1 - 博客园js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下：keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = Clehttps://www.cnblogs.com/wuhua1/p/6686237.html

例如我们想通过按f2来实现添加，显然

keyup.f2='add()'

上面的做法是不行的。这个时候就只能用我们说到的键码来实现：

keyup.113='add()'

当然，看到113不一定能第一时间想起来是对于键盘上的哪个键，我们就可以再js中自定义全局按键修饰符：

Vue.config.keywords.f2 = 113;

悠玄烛远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端框架学习】自定义按键修饰符

摘要
复制链接

扫一扫

专栏目录

【前端框架学习】自定义按键修饰符

“相关推荐”对你有帮助么？