The whole process of implementing the summary pop-up window with Vue+Element UI

Scenario: An inspection document has n inspection details, and an inspection detail has n inspection items.

Implementation effect: When the mouse moves to the summary icon of the detail row, the pop-up window of the inspection item card of the current row is displayed, and the pop-up window is closed when the mouse moves out of the pop-up window

Inspection document details

insert image description here

Move the mouse over the project overview icon

insert image description here

Effect realization

Variables declared in data

//Outline pop-up window outlineDialog: false,
//Standard summary of the current row standSummary: [],
// Outline pop-up window position control outlineCard: {
    pageY: null,
    pageX: null,
    display: "none"
}

1. Pop-up code

outlineDialog: default false, outline pop-up window display logo
outlineStyle: Dynamic style setting for pop-up windows, monitoring in computed and two-way data binding display
leave: The event when the mouse leaves the pop-up card

<!-- Project Overview -->
<div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle" @mouseleave="leave">
    <div class="summary-title">Project Summary</div>
    <ul class="summary-ul">
        <li class="summary-li"><span>Standard Name</span><span>Is it required?</span><span>Is it displayed?</span></li>
        <li v-for="(item, index) in standSummary" :key="index" class="summary-li"><span>{{item.inspectdetailName}}</span><span>{{item.isRequired ? 'Yes' : 'No'}}</span> <span>{{item.isDisplay ? 'Yes' : 'No'}}</span> </li>
    </ul>
</div>

2. Pop-up window style code

<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. Item Summary Column Code of Detailed Table

checkStandSunmmary: The event when the mouse moves to the summary icon

<el-table-column label="Project Overview" align="center" width="500">
    <template slot="header">
        <span>Project Overview</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;{{scope.row.equInspectplanItemList.length}}&nbsp;items</span>
            <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
        </div>
    </template>
</el-table-column>

4. outlineStyle pop-up card dynamic style control

When the details are at the bottom of the page, the card will still be displayed but part of it will be covered. You need to dynamically calculate the position of the card opening according to the position of the summary icon. If it is at the bottom, open the card upwards.

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 event when the mouse leaves the pop-up card

When the mouse moves out of the card, set the card display style to none and set v-show to false so that the pop-up window does not display

/**
 * Mouse leave standard summary */
leave() {
    this.outlineCard.display = "none";
    this.outlineDialog = false;
},

6. checkStandSunmmary event when the mouse moves to the summary icon

Open the pop-up card and get the inspection items of the current row. Get the current mouse position on the X and Y axes of the browser. Dynamically set the pop-up card style to null (display is displayed except for none, which means it is not displayed)

/**
 * Current row standard summary */
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;
},

Summarize

This is the end of this article about the Vue+Element UI implementation summary pop-up window. For more relevant Vue+Element UI pop-up window content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue implements table pop-up component based on Element-ui
Solution to the problem of repeated pop-up of Element's Message pop-up window
Steps for encapsulating element-ui pop-up components
Implementation of vue+elementui universal pop-up window (add+edit)
Solution to the failure of closing the dialog pop-up window in element-ui
Detailed explanation of the problem between pop-up windows using element ui and echarts in vue
Element modifies the implementation of the level of pop-up window components

<<: The latest MySQL 5.7.23 installation and configuration graphic tutorial

>>: Detailed explanation of nmcli usage in CentOS8