vue 구성 요소 내에서 마우스 이동 이벤트가 올바르게 작동하도록 하려면 어떻게 해야 합니까?

vue 구성 요소 내에서 마우스 이동 이벤트가 올바르게 작동하도록 하려면 어떻게 해야 합니까?

저는 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>

<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);
        }
    }
}

사용자 기본 마우스 이동 이벤트 --

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

export default {
    data() {
        return {
            popup: false
        }
    },
    mounted:function(){
      document.getElementById("elementId").addEventListener('mousemove', function(event){
        console.log(event.screenX + '-' + event.screenY);
        // change the position of popup here by changing top and left property -
        document.getElementById('popup').style.top = event.screenY+'px';
        document.getElementById('popup').style.left = event.screenX+'px';
      });
    },
    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);
        }
    }
}

언급URL : https://stackoverflow.com/questions/51873582/how-do-i-get-the-mousemove-event-to-function-correctly-inside-a-vue-component