Question

我是vue.js的新手，正在尝试构建一个组件，该组件会触发一个弹出窗口，将鼠标悬停在某个元素上时将跟随鼠标的位置。问题在于，仅在进入/离开元素时才记录鼠标位置，而不是每次在元素内移动鼠标时才记录鼠标位置。我将如何使其正常工作？ <模板>

<脚本> 导出默认值{ data（）{ 返回{ 弹出式视窗：假 } }，方法： { 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）; } } }

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

Answer 2

用户本机 mousemove 事件-

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

如何使mousemove事件在vue组件中正常运行？

2 个答案: