1图仓、彈出配置
<el-popover placement="right-end" //彈框出現(xiàn)位置
? ? ? ? ? ? ? ? ? ? title="機(jī)器信息"??????//彈框內(nèi)容標(biāo)題
? ? ? ? ? ? ? ? ? ? width="350"??? ???????//彈框?qū)挾??????
????????????????????trigger="hover"??? ???//觸發(fā)方式
????????????????????popper-class="machine" //為 popper 添加類(lèi)名
????????????????????:disabled="machineShow"? //彈框內(nèi)容顯示標(biāo)志位
????????????????????ref="machine"????????? //彈框 ref 可以看做別名,可以不設(shè)置
????????????????????@show="show()"???????? //彈框顯示事件
????????????????????@hide="show()"???? ????//彈框隱藏事件
????????????????????:open-delay="opendelay" > //觸發(fā)方式為 hover 時(shí)的顯示延遲ms
2、內(nèi)容配置
<div @mouseenter="enter()" // 鼠標(biāo)移入彈框內(nèi)容事件
? ? ? ?@mouseleave="leave()">?????? //鼠標(biāo)移出彈框內(nèi)容事件
3姆吭、 對(duì)象配置
A、data
????????opendelay:300,//hover 延時(shí)觸發(fā)時(shí)間
????????machineShow:false麦到,//彈框內(nèi)容是否顯示標(biāo)志位
B振惰、methods
????????show(){ //el-popover 顯示和隱藏事件
??????? ????????this.machineShow= false;
????????},
????????enter(){//鼠標(biāo)移動(dòng)到彈框內(nèi)容事件
? ????????????? this.machineShow = true;
????????},
????????leave(){//鼠標(biāo)移出彈框內(nèi)容事件
? ????? ????????const self = this;
? ????? ????????setTimeout(function() {//用于延遲顯示彈框事件,同時(shí)=opendelay
??????? ??????????????? self.machineShow = false;
??????????????????? }, 300);
?????????},