HTML:

<divclass="Content">

<divclass="headerTitle">

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

<pclass="title-airhover">空氣質量日曆</p><pclass="title-iconl">(</p>

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

<divclass="calendar">

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

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

<divstyle="position:relative">

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

<divv-for="itemincalendarData":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>

<divv-else></div>

</div>

</div>

</template>

</el-calendar>

</div>

<divclass="pupop"ref="pupop">

彈框內容

</div>

</div>

</div>

JS:

//日曆浮框

calendarPupop(data){

// 浮框跟著滑鼠移動

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

varpupop=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