Vue+Element UI實現概要小彈窗的全過程
場景:一個巡檢單據有n個巡檢明細,一個巡檢明細有n個巡檢項目。
實現效果:當鼠標移到明細行的概要圖標時顯示當前行的巡檢項目卡片彈窗,移出彈窗時關閉彈窗
巡檢單據詳情
鼠標移到項目概要圖標
效果實現
data裡面聲明的變量
// 概要彈窗 outlineDialog: false, // 當前行標準概要 standSummary: [], // 概要彈窗位置控制 outlineCard: { pageY: null, pageX: null, display: "none" }
1、彈窗代碼
outlineDialog:默認false,概要彈窗顯示標志
outlineStyle:彈窗的動態樣式設置,在computed進行監控和進行雙向數據綁定展示
leave:鼠標離開彈窗卡片的事件
<!-- 項目概要 --> <div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle" @mouseleave="leave"> <div class="summary-title">項目概要</div> <ul class="summary-ul"> <li class="summary-li"><span>標準名稱</span><span>是否必填</span><span>是否顯示</span></li> <li v-for="(item, index) in standSummary" :key="index" class="summary-li"><span>{{item.inspectdetailName}}</span><span>{{item.isRequired ? '是':'否'}}</span> <span>{{item.isDisplay ? '是':'否'}}</span> </li> </ul> </div>
2、彈窗樣式代碼
<style lang="scss"> #box-cardDiv { position: absolute; } .summary-div { border: solid 1px #eee; background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); padding: 10px 10px 0 10px; width: 300px; position: absolute; font-size: 13px; } .summary-ul { list-style: none; padding-left: 0; max-height: 350px; overflow-x: hidden; overflow-y: auto; } .summary-li { margin: 10px 10px 15px 10px; width: 250px; text-overflow: ellipsis; overflow: hidden; /* white-space: nowrap; */ display: flex; span { margin: auto; width: 55px; } } .summary-li:first-child span:not(:first-child) { margin-left: 40px; } .summary-li:not(:first-child) span:nth-child(1) { width: 90px; } .summary-li:not(:first-child) span:nth-child(2) { width: 50px; margin-left: 45px; } .summary-li:not(:first-child) span:nth-child(3) { margin-left: 60px; } .summary-title { color: #cccccc; margin-left: 10px; } </style>
3、明細表格的項目概要列代碼
checkStandSunmmary:鼠標移到概要圖標的事件
<el-table-column label="項目概要" align="center" width="500"> <template slot="header"> <span>項目概要</span> <span class="vertical"></span> </template> <template slot-scope="scope"> <div class="col-summmary-div"> <span class="col-summmary-format"><span>{{scope.row.firstListItem}}</span></span> <span> 等 {{scope.row.equInspectplanItemList.length}} 項 </span> <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i> </div> </template> </el-table-column>
4、outlineStyle 彈窗卡片動態樣式控制
明細在頁面底端的時候卡片照舊展示會被蓋掉一部分,需要根據概要圖標的位置動態計算卡片打開的位置,如果在底端就把卡片往上邊打開
computed: { outlineStyle() { let h = 45 * this.standSummary.length; let browser = document.body.clientHeight - 50; let pageY = this.outlineCard.pageY - 50; let pageX = this.outlineCard.pageX - 280; if (pageY + h > browser) { return `left: ${ pageX }px; top: ${ (pageY-h) }px; position: absolute; display: ${ this.outlineCard.display }`; } else { return `left: ${ pageX }px; top: ${ (pageY-60) }px; position: absolute; display: ${ this.outlineCard.display }`; } } },
5、leave 鼠標離開彈窗卡片的事件
當鼠標移出卡片把卡片
display
樣式設置為none同時設置v-show
為false彈窗不展示
/** * 鼠標離開標準概要 */ leave() { this.outlineCard.display = "none"; this.outlineDialog = false; },
6、checkStandSunmmary 鼠標移到概要圖標的事件
打開彈窗卡片
獲取當前行的檢驗項目集合
獲取當前鼠標在瀏覽器的X軸Y軸位置
動態設置彈窗卡片樣式為null(display除瞭寫none為不顯示其他值都是顯示)
/** * 當前行標準概要 */ checkStandSunmmary(row) { this.outlineDialog = true; this.standSummary = row.equInspectplanItemList; this.outlineCard.pageY = window.event.clientY; this.outlineCard.pageX = window.event.clientX; this.outlineCard.display = null; },
總結
到此這篇關於Vue+Element UI實現概要小彈窗的文章就介紹到這瞭,更多相關Vue+Element UI小彈窗內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!