如何让 mousemove 事件在 vue 组件内正常运行？

Question

我是 vue.js 的新手，并试图构建一个组件，该组件会触发一个弹出窗口，当鼠标悬停在一个元素上时，该弹出窗口将跟随鼠标位置。问题是鼠标位置只在进入/离开元素时记录，而不是每次鼠标在元素内移动时记录。我怎样才能让它正常工作？

<template>
    <div>
        <div class="hover" @mouseenter="mouseEnter" @mouseleave="mouseLeave"></div>
        <div class="popup" v-if="popup">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                popup: false
            }
        },
        methods: {
            mouseEnter() {
                console.log('mouseneter');
                this.popup = true;
                this.$el.addEventListener('mousemove', this.mouseMove());
            },
            mouseLeave() {
                console.log('mouseleave');
                this.popup = false;
                this.$el.removeEventListener('mousemove', this.mouseMove());
            },
            mouseMove() {
                console.log(event.clientX, event.clientY);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .popup {
        position: absolute;
        top: 0;
        left: 100%;
    }
</style>

Answer 1

<template>
<div>
    <div class="hover" @mouseenter="mouseEnter" @mousemove="mousemove" @mouseleave="mouseLeave"></div>
    <div class="popup" v-if="popup">
        <slot></slot>
    </div>
</div>

<script>
export default {
    data() {
        return {
            popup: false
        }
    },
    methods: {
        mouseEnter(event) {
            console.log('mouseneter');
            this.popup = true;
            this.$el.addEventListener('mousemove', this.mouseMove, false);
        },
        mouseLeave(event) {
            this.popup = false;
            // this.$el.removeEventListener('mousemove', this.mouseMove());
        },
        mouseMove(event) {
            console.log(event.clientX, event.clientY);
        }
    }
}