Vue+Element UI實(shí)現(xiàn)概要小彈窗的全過程
場(chǎng)景:一個(gè)巡檢單據(jù)有n個(gè)巡檢明細(xì),一個(gè)巡檢明細(xì)有n個(gè)巡檢項(xiàng)目。
實(shí)現(xiàn)效果:當(dāng)鼠標(biāo)移到明細(xì)行的概要圖標(biāo)時(shí)顯示當(dāng)前行的巡檢項(xiàng)目卡片彈窗,移出彈窗時(shí)關(guān)閉彈窗
巡檢單據(jù)詳情
鼠標(biāo)移到項(xiàng)目概要圖標(biāo)
效果實(shí)現(xiàn)
data里面聲明的變量
// 概要彈窗 outlineDialog: false, // 當(dāng)前行標(biāo)準(zhǔn)概要 standSummary: [], // 概要彈窗位置控制 outlineCard: { pageY: null, pageX: null, display: "none" }
1、彈窗代碼
outlineDialog:默認(rèn)false,概要彈窗顯示標(biāo)志
outlineStyle:彈窗的動(dòng)態(tài)樣式設(shè)置,在computed進(jìn)行監(jiān)控和進(jìn)行雙向數(shù)據(jù)綁定展示
leave:鼠標(biāo)離開彈窗卡片的事件
<!-- 項(xiàng)目概要 --> <div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle" @mouseleave="leave"> <div class="summary-title">項(xiàng)目概要</div> <ul class="summary-ul"> <li class="summary-li"><span>標(biāo)準(zhǔn)名稱</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、明細(xì)表格的項(xiàng)目概要列代碼
checkStandSunmmary:鼠標(biāo)移到概要圖標(biāo)的事件
<el-table-column label="項(xiàng)目概要" align="center" width="500"> <template slot="header"> <span>項(xiàng)目概要</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}} 項(xiàng) </span> <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i> </div> </template> </el-table-column>
4、outlineStyle 彈窗卡片動(dòng)態(tài)樣式控制
明細(xì)在頁(yè)面底端的時(shí)候卡片照舊展示會(huì)被蓋掉一部分,需要根據(jù)概要圖標(biāo)的位置動(dòng)態(tài)計(jì)算卡片打開的位置,如果在底端就把卡片往上邊打開
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 鼠標(biāo)離開彈窗卡片的事件
當(dāng)鼠標(biāo)移出卡片把卡片display
樣式設(shè)置為none同時(shí)設(shè)置v-show
為false彈窗不展示
/** * 鼠標(biāo)離開標(biāo)準(zhǔn)概要 */ leave() { this.outlineCard.display = "none"; this.outlineDialog = false; },
6、checkStandSunmmary 鼠標(biāo)移到概要圖標(biāo)的事件
打開彈窗卡片
獲取當(dāng)前行的檢驗(yàn)項(xiàng)目集合
獲取當(dāng)前鼠標(biāo)在瀏覽器的X軸Y軸位置
動(dòng)態(tài)設(shè)置彈窗卡片樣式為null(display除了寫none為不顯示其他值都是顯示)
/** * 當(dāng)前行標(biāo)準(zhǔn)概要 */ 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; },
總結(jié)
到此這篇關(guān)于Vue+Element UI實(shí)現(xiàn)概要小彈窗的文章就介紹到這了,更多相關(guān)Vue+Element UI小彈窗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue學(xué)習(xí)筆記五:在vue項(xiàng)目里面使用引入公共方法詳解
這篇文章主要介紹了在vue項(xiàng)目里面使用引入公共方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue使用recorder.js實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實(shí)現(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例
本文主要介紹了vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)
本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個(gè)小系統(tǒng)后,做的心得以及遇到的坑的總結(jié),值得大家學(xué)習(xí)參考。2018-02-02