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 | 
转播
