自定义element日历控件，出现浮框跟随鼠标移动

HTML:

<div class="Content">

            <div class="headerTitle">

              <div class="line-left"></div>

              <p class="title-air hover">空气质量日历</p><p class="title-iconl">(</p>

              <p class="title-icon">)</p>

              <div class="calendar">

                <el-calendar v-model="value" id="calendar">

                  <template slot="dateCell" slot-scope="{ data }">

                    <div style="position: relative">

                      {{ data.day.split("-").slice(2)[0] }}

                      <div v-for="item in calendarData" :key="item.id">

                        <div

                          v-if="data.day.split('-').slice(1)[0] == item.month"

                        >

                          <div

                            v-if="

                              item.day.indexOf(

                                data.day.split('-').slice(2).join('-')

                              ) != -1 && item.quality != -1

                            "

                            :class="'li-0' + item.quality"

                            class="calendar-for"

                          >

                            <p @mouseover="calendarPupop(data.day)">{{ data.day.split("-").slice(2)[0] }}</p>//鼠标事件

                          </div>

                        </div>

                        <div v-else></div>

                      </div>

                    </div>

                  </template>

                </el-calendar>

              </div>

               <div class="pupop" ref="pupop">

                 弹框内容

               </div>

            </div>

          </div>

JS:

//日历浮框

calendarPupop(data){

  // 浮框跟着鼠标移动

document.οnmοusemοve=function(e){

     var pupop=document.querySelector(".pupop")

      if(data!=0){//浮框的显示和掩藏，以及浮框的位置（可根据自己的需要调整）

        pupop.style.display="flex"

        pupop.style.left=(e.clientX-160)+"px";

        pupop.style.top=(e.clientY-330)+"px"; 

      }else{

         pupop.style.display="none"

      }   

  }

  document.οnmοuseοut=function(e){

    data=0;

  }

}

CSS:

.pupop{//浮框样式

  position: absolute;

  top:0;

  left: 0;

  width: 3rem;

  height: 1.7rem;

  // background: greenyellow;

  display:none;

 }

注：部分参数不全，及日历的背景色可参考：https://mp.csdn.net/console/editor/html/108844057