Vue+Element UIの概要と小弾戸の全過程を実現します。

シーン：一つの巡回検査書にはn個の巡回検査の明細があります。一つの巡回検査の明細にはn個の巡回検査項目があります。
実現効果：詳細行の概要アイコンにマウスを移動すると、現在の行の巡回検査項目カードのポップアップウィンドウが表示されます。
巡回検査票の詳細

プロジェクト概要アイコンにマウスを移動


効果の実現
dataで宣言した変数

//     
outlineDialog: false,
//        
standSummary: [],
//         
outlineCard: {
    pageY: null,
    pageX: null,
    display: "none"
}

1、パチンココード
Outline Dialog：デフォルトfalse、概要ポップアップ表示フラグ
Outline Style：ポップアップウィンドウのダイナミックスタイル設定は、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、明細表の項目概要列コード
checkStand Summary：概要アイコンにマウスを移動するイベント

<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>&nbsp; &nbsp;{{scope.row.equInspectplanItemList.length}}&nbsp; &nbsp;</span>
            <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
        </div>
    </template>
</el-table-column>

4、outline Styleポップアップカードのダイナミックパターン制御
詳細はページの底にある時、カードはまだ展示会で蓋をされます。概要アイコンの位置によって、カードが開いている位置を動的に計算します。もし底にあるなら、カードを上に開きます。

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、checkStand Summaryマウスを概要アイコンに移動するイベント
ぱちんこのカードを開く
現在の行の検査項目セットを取得します。
現在のマウスのブラウザの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に関するブログの内容は以前の記事を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。