vue事件跟随鼠标显示事件详情

本文是写与vue中，但用法html也一样，很简单（如果对你有帮助点个赞谢谢哟(＾Ｕ＾)ノ~ＹＯ）
贴上代码：

<template>
  <div>
    <div class="a1" @mouseenter="enter($event)" @mouseleave="leave($event)">鼠标放上</div>
    <div class="a2" @mouseenter="enter($event)" @mouseleave="leave($event)">鼠标放上</div>
    <!--鼠标放上显示的div-->
    <div id="mouse" class="normal"></div>
  </div>
</template>

<script>

  export default {
    name:'',
    props:[''],
    data () {
      return {

      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
      enter(event){
        console.log(event)
        var showDiv = document.getElementById('mouse')
        showDiv.style='background-color:black;border:1px solid black'
        showDiv.style.left = (event.pageX-50) + 'px'
        showDiv.style.top = (event.pageY-100) + 'px'
        showDiv.style.display = 'block'
        var html ='今天是个好日子'
        showDiv.innerHTML = html
      },
      leave($event){
        // alert(2)
        var showDiv = document.getElementById('mouse')
        showDiv.style.display = 'none'
        showDiv.innerHTML = ''
      }
    },

    watch: {}

  }

</script>
<style lang='' scoped>
  .a1{
    position: relative;
    top: 20px;
    left: 50px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  .a2{
    position: relative;
    top: 130px;
    left: 100px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  .normal{
    position: absolute;
    opacity: 0.8;
    color: white;
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
    display: none;
  }
</style>

效果如图：

右侧控制台是事件信息以及位置
如果对你有帮助点个赞哟(＾Ｕ＾）