Vue下给 div 自定义键盘事件以及键盘修饰符

最新推荐文章于 2024-05-15 07:38:40 发布

夜跑者

最新推荐文章于 2024-05-15 07:38:40 发布

阅读量3.7k

点赞数 1

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/106200165

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

只有有焦点的元素才能输入键盘字符，例如<input>，而div元素就不行，需要给它绑定一个自定义事件。我们在手动键盘事件keydown时，发送一个自定义事件来实现。

在Vue下我们可以给事件一个修饰符，采用Vue全局config对象来添加，例如：Vue.config.keyCodes['Left'] = 37

我们通过一个例子来看看如何实现 Vue下给 div 自定义键盘事件以及键盘修饰符

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my key down</title>
    <style>
        .bg {
            width: 600px;
            height: 6px;
            background-color: gray;
            margin: auto;
            margin-top: 200px
        }

        .progress {
            position: absolute;
            height: 6px;
            background-color: red;
        }
    </style>
</head>
<body>
<script src="./vue.js"></script>
<div id="app">
    <div class="bg">
        <div ref="pgId" class="progress" @my-key-down.Right="keydownRight" @my-key-down.Left="keydownLeft"></div>
    </div>
</div>
<script>

    const app = new Vue({
        el: '#app',
        data: function() {
            return {
                pg: 0
            }
        },
        created() {
            Vue.config.keyCodes['Left'] = 37 //添加自定义键盘修饰符
            Vue.config.keyCodes['Right'] = 39
        },
        mounted() {
            let pgId = this.$refs.pgId;
            window.addEventListener("keydown", function(event) {
                //收到标准键盘事件keydown后，创建一个自定义事件my-key-down, 并dispatchEvent
                //Vue绑定的@my-key-down就会收到这个自定义事件
                var myEvent = new Event('my-key-down')
                myEvent.keyCode = event.keyCode;
                pgId.dispatchEvent(myEvent)
            })
        },
        methods: {
            keydownLeft() {
                this.pg -= 50;
                this.$refs.pgId.style.width = this.pg + "px"
            },
            keydownRight() {
                this.pg += 50;
                this.$refs.pgId.style.width = this.pg + "px"
            },
            anonymous() {
                with (this) {
                    return _c('div', {
                        attrs: {
                            "id": "app"
                        }
                    }, [_c('div', {
                        staticClass: "bg"
                    }, [_c('div', {
                        ref: "pgId",
                        staticClass: "progress",
                        on: {
                            "my-key-down": [function($event) {
                                if (!('button'in $event) && _k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"]))
                                    return null;
                                if ('button'in $event && $event.button !== 2)
                                    return null;
                                return keydownRight($event)
                            }, function($event) {
                                if (!('button'in $event) && _k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"]))
                                    return null;
                                if ('button'in $event && $event.button !== 0)
                                    return null;
                                return keydownLeft($event)
                            }
                            ]
                        }
                    })])])
                }
            }
        }
    });
</script>
</body>
</html>

注意methods里面的anonymous函数是模板编译成的render函数。虽然看不大懂，但我们可以看到一些关键代码。例如'my-key-down" "right" "left"。

代码里面在关键代码处加了注释。如还有不懂的地方，可留言。

夜跑者

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue下给 div 自定义键盘事件以及键盘修饰符

只有有焦点的元素才能输入键盘字符，例如<input>，而div元素就不行，需要给它绑定一个自定义事件。我们在手动键盘事件keydown时，发送一个自定义事件来实现。在Vue下我们可以给事件一个修饰符，采用Vue全局config对象来添加，例如：Vue.config.keyCodes['Left'] = 37我们通过一个例子来看看如何实现 Vue下给 div 自定义键盘事件以及键盘修饰符<!DOCTYPE html><html>...
复制链接

扫一扫