Der gesamte Prozess der Implementierung des Zusammenfassungs-Popup-Fensters mit Vue+Element UI

//Popup-Fenster umreißen outlineDialog: false,
//Standardzusammenfassung der aktuellen Zeile standSummary: [],
// Gliederung der Popup-Fensterpositionssteuerung outlineCard: {
    SeiteY: null,
    SeiteX: null,
    Anzeige: "keine"
}

<!-- Projektübersicht -->
<div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle" @mouseleave="verlassen">
    <div class="summary-title">Projektzusammenfassung</div>
    <ul Klasse="Zusammenfassung-ul">
        <li class="summary-li"><span>Standardname</span><span>Ist er erforderlich?</span><span>Wird er angezeigt?</span></li>
        <li v-for="(item, index) in standSummary" :key="index" class="summary-li"><span>{{item.inspectdetailName}}</span><span>{{item.isRequired ? 'Ja' : 'Nein'}}</span> <span>{{item.isDisplay ? 'Ja' : 'Nein'}}</span> </li>
    </ul>
</div>

<style lang="scss">
#box-cardDiv {
    Position: absolut;
}

.summary-div {
    Rand: durchgezogen 1px #eee;
    Hintergrundfarbe: #fff;
    Rahmenradius: 4px;
    Kastenschatten: 0 2px 12px 0 rgba(0, 0, 0, .1);
    Polsterung: 10px 10px 0 10px;
    Breite: 300px;
    Position: absolut;
    Schriftgröße: 13px;
}

.summary-ul {
    Listenstil: keiner;
    Polsterung links: 0;
    maximale Höhe: 350px;
    Überlauf-x: versteckt;
    Überlauf-y: automatisch;
}

.summary-li {
    Rand: 10px 10px 15px 10px;
    Breite: 250px;
    Textüberlauf: Auslassungspunkte;
    Überlauf: versteckt;
    /* Leerzeichen: nowrap; */
    Anzeige: Flex;

    Spanne {
        Rand: automatisch;
        Breite: 55px;
    }
}

.summary-li:erstes-Kind span:nicht(:erstes-Kind) {
    Rand links: 40px;
}

.summary-li:nicht(:erstes-Kind) span:ntes-Kind(1) {
    Breite: 90px;
}

.summary-li:nicht(:erstes-Kind) span:ntes-Kind(2) {
    Breite: 50px;
    Rand links: 45px;
}

.summary-li:nicht(:erstes-Kind) span:ntes-Kind(3) {
    Rand links: 60px;
}

.Zusammenfassungstitel {
    Farbe: #cccccc;
    Rand links: 10px;
}
</Stil>

<el-table-column label="Projektübersicht" align="center" width="500">
    <template slot="header">
        <span>Projektübersicht</span>
        <span class="vertical"></span>
    </Vorlage>
    <template slot-scope="Umfang">
        <div Klasse="col-summmary-div">
            <span class="col-summmary-format"><span>{{scope.row.firstListItem}}</span></span>
            <span>&nbsp;{{scope.row.equInspectplanItemList.length}}&nbsp;Elemente</span>
            <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
        </div>
    </Vorlage>
</el-Tabellenspalte>

berechnet: {
    Umrissstil() {
        sei h = 45 * this.standSummary.length;
        let browser = document.body.clientHeight - 50;
        let pageY = this.outlineCard.pageY - 50;
        let pageX = this.outlineCard.pageX – 280;
        if (SeiteY + h > Browser) {
            returniere `links: ${ pageX }px; oben: ${ (pageY-h) }px; Position: absolut; Anzeige: ${ this.outlineCard.display }`;
        } anders {
            returniere `links: ${ pageX }px; oben: ${ (pageY-60) }px; Position: absolut; Anzeige: ${ this.outlineCard.display }`;
        }
    }
},

/**
 * Mauszeiger verlassen Standardzusammenfassung */
verlassen() {
    this.outlineCard.display = "keine";
    this.outlineDialog = falsch;
},

/**
 * Aktuelle Zeilenstandardzusammenfassung */
checkStandSunmmary(Zeile) {
    this.outlineDialog = wahr;
    this.standSummary = Zeile.equInspectplanItemList;
    this.outlineCard.pageY = Fenster.Ereignis.ClientY;
    diese.outlineCard.pageX = Fenster.Ereignis.ClientX;
    this.outlineCard.display = null;
},