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

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

夜跑者

3857人浏览 · 2020-05-18 20:10:13

夜跑者 · 2020-05-18 20:10:13 发布

只有有焦点的元素才能输入键盘字符，例如<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"。

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^