欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+Element UI實(shí)現(xiàn)概要小彈窗的全過程

 更新時(shí)間:2021年05月30日 11:25:06   作者:一天學(xué)億點(diǎn)  
彈窗效果是我們?nèi)粘i_發(fā)中經(jīng)常遇到的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于Vue+Element UI實(shí)現(xiàn)概要小彈窗的相關(guā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>&nbsp;等&nbsp;{{scope.row.equInspectplanItemList.length}}&nbsp;項(xiàng)&nbsp;</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學(xué)習(xí)筆記五:在vue項(xiàng)目里面使用引入公共方法詳解

    這篇文章主要介紹了在vue項(xiàng)目里面使用引入公共方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue使用recorder.js實(shí)現(xiàn)錄音功能

    vue使用recorder.js實(shí)現(xiàn)錄音功能

    這篇文章主要為大家詳細(xì)介紹了vue使用recorder.js實(shí)現(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • 一文詳解Vue中過濾器filters的使用

    一文詳解Vue中過濾器filters的使用

    Vue.js允許自定義過濾器,過濾器的作用可被用于一些常見的文本格式化(也就是修飾文本,但是文本內(nèi)容不會(huì)改變),本文主要來和大家講講過濾器filters的使用,感興趣的可以了解一下
    2023-04-04
  • 基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例

    基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例

    本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例

    vue實(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-11
  • vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)

    vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)

    本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個(gè)小系統(tǒng)后,做的心得以及遇到的坑的總結(jié),值得大家學(xué)習(xí)參考。
    2018-02-02
  • vue.js開發(fā)環(huán)境搭建教程

    vue.js開發(fā)環(huán)境搭建教程

    這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的搭建教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • vue 父組件通過v-model接收子組件的值的代碼

    vue 父組件通過v-model接收子組件的值的代碼

    這篇文章主要介紹了vue 父組件通過v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-10-10
  • 使用?Vue3?實(shí)現(xiàn)文章目錄功能

    使用?Vue3?實(shí)現(xiàn)文章目錄功能

    本文給大家分享如何使用vue3實(shí)現(xiàn)文章目錄功能,特色功能主要是自動(dòng)高亮選中當(dāng)前正在閱讀的章節(jié),自動(dòng)展開當(dāng)前正在閱讀的章節(jié)的子標(biāo)題,并隱藏其他章節(jié)的子標(biāo)題,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧
    2022-03-03
  • 淺談vue中的data與_data的關(guān)系是什么

    淺談vue中的data與_data的關(guān)系是什么

    在Vue實(shí)例中,data屬性是用戶定義的用于存儲(chǔ)數(shù)據(jù)的對(duì)象,而_data是Vue內(nèi)部用于存儲(chǔ)數(shù)據(jù)的對(duì)象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下
    2023-12-12

最新評(píng)論