Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。

実装効果:マウスが詳細行の概要アイコンに移動すると、現在の行の検査項目カードのポップアップウィンドウが表示され、マウスがポップアップウィンドウから外れるとポップアップウィンドウが閉じられます。

検査書類の詳細

ここに画像の説明を挿入

プロジェクト概要アイコンの上にマウスを移動します

ここに画像の説明を挿入
ここに画像の説明を挿入

効果の実現

データ内で宣言された変数

//アウトラインポップアップウィンドウ outlineDialog: false,
//現在の行の標準サマリー standSummary: [],
// アウトラインポップアップウィンドウの位置コントロール outlineCard: {
    ページY: null、
    ページX: null、
    表示: 「なし」
}

1. ポップアップコード

outlineDialog: デフォルトは false、アウトラインポップアップウィンドウにロゴを表示
outlineStyle: ポップアップ ウィンドウの動的スタイル設定、計算された双方向データ バインディング表示の監視
マウスがポップアップカードから離れたときのイベント

<!-- プロジェクト概要 -->
<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. ポップアップウィンドウスタイルコード

<スタイル lang="scss">
#ボックスカードDiv {
    位置: 絶対;
}

.要約-div {
    境界線: 実線 1px #eee;
    背景色: #fff;
    境界線の半径: 4px;
    ボックスの影: 0 2px 12px 0 rgba(0, 0, 0, .1);
    パディング: 10px 10px 0 10px;
    幅: 300ピクセル;
    位置: 絶対;
    フォントサイズ: 13px;
}

.summary-ul {
    リストスタイル: なし;
    左パディング: 0;
    最大高さ: 350px;
    オーバーフロー-x:非表示;
    オーバーフロー-y: 自動;
}

.要約-li {
    マージン: 10px 10px 15px 10px;
    幅: 250ピクセル;
    テキストオーバーフロー: 省略記号;
    オーバーフロー: 非表示;
    /* 空白: nowrap; */
    ディスプレイ: フレックス;

    スパン {
        マージン: 自動;
        幅: 55px;
    }
}

.summary-li:first-child span:not(:first-child) {
    左マージン: 40px;
}

.summary-li:not(:first-child) span:nth-child(1) {
    幅: 90ピクセル;
}

.summary-li:not(:first-child) span:nth-child(2) {
    幅: 50px;
    左マージン: 45px;
}

.summary-li:not(:first-child) span:nth-child(3) {
    左マージン: 60px;
}

.要約タイトル{
    色: #cccccc;
    左マージン: 10px;
}
</スタイル>

3. 詳細表の項目要約列コード

checkStandSunmmary: マウスが概要アイコンに移動したときのイベント
<el-table-column label="プロジェクト概要" align="center" width="500">
    <テンプレートスロット="ヘッダー">
        <span>プロジェクト概要</span>
        <span class="vertical"></span>
    </テンプレート>
    <テンプレート スロット スコープ="スコープ">
        <div class="col-summmary-div">
            <span class="col-summmary-format"><span>{{scope.row.firstListItem}}</span></span>
            <span>&nbsp;{{scope.row.equInspectplanItemList.length}}&nbsp;アイテム</span>
            <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
        </div>
    </テンプレート>
</el-table-column>

4. outlineStyle ポップアップカードのダイナミックスタイルコントロール

詳細がページの下部にある場合、カードは表示されますが、一部が隠れてしまいます。概要アイコンの位置に応じて、カードを開く位置を動的に計算する必要があります。概要アイコンが下部にある場合は、カードを上方向に開きます。
計算: {
    アウトラインスタイル() {
        h = 45 * this.standSummary.lengthとします。
        ブラウザを document.body.clientHeight - 50 とします。
        pageY を this.outlineCard.pageY - 50 とします。
        pageX を this.outlineCard.pageX - 280 とします。
        if (ページY + h > ブラウザ) {
            `left: ${ pageX }px; top: ${ (pageY-h) }px; position: absolute; display: ${ this.outlineCard.display }` を返します。
        } それ以外 {
            `left: ${ pageX }px; top: ${ (pageY-60) }px; position: absolute; display: ${ this.outlineCard.display }` を返します。
        }
    }
},

5. マウスがポップアップカードから離れたときにイベントを終了する

マウスがカードから外れると、カードのdisplayスタイルをnoneに設定し、 v-show falseに設定してポップアップウィンドウが表示されないようにします。
/**
 * マウスの標準要約を残す */
離れる() {
    this.outlineCard.display = "なし";
    this.outlineDialog は false です。
},

6. マウスがサマリーアイコンに移動したときのcheckStandSunmmaryイベント

ポップアップ カードを開き、現在の行の検査項目を取得します。ブラウザーの X 軸と Y 軸上の現在のマウス位置を取得します。ポップアップ カードのスタイルを null に動的に設定します (none 以外は表示され、none は表示されません)。

/**
 * 現在の行の標準サマリー */
checkStandSunmmary(行) {
    アウトラインダイアログを 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 ポップアップウィンドウに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueはElement-uiをベースにテーブルポップアップコンポーネントを実装します
  • Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決
  • 要素UIポップアップコンポーネントをカプセル化する手順
  • vue+elementui ユニバーサルポップアップウィンドウの実装 (追加+編集)
  • element-ui でダイアログ ポップアップ ウィンドウを閉じることができない問題の解決方法
  • Vue の要素 UI と echarts を使用したポップアップ ウィンドウ間の問題の詳細な説明
  • 要素はポップアップウィンドウコンポーネントのレベルの実装を変更します

<<:  最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

>>:  CentOS8でのnmcliの使い方の詳しい説明

推薦する

Vueのprovideとinjectの使い方と原則を分析する

まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...

MySQLは実際に分散ロックを実装できる

序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...

マウスを置いたときに半透明効果のテキスト説明を実現するための純粋な CSS (初心者は必読)

効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...

ウェブページでメモの詳細が灰色になる問題に対処する

1. IE では、相対的な配置、つまり <div style="background...

MySQL 5.7 のパフォーマンスと sys スキーマの監視パラメータの説明 (推奨)

1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...

ES6スプレッド演算子の使用例

目次スプレッド演算子とレスト演算子とは何ですか?配列スプレッド演算子残り演算子(コレクション関数)ス...

MySQL に絵文字表現を挿入できない問題の解決方法

序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...

Linuxでファイルの作成時間を表示する方法

1. はじめにLinux でファイルの作成時刻が見つかるかどうかは、ファイル システムの種類によって...

MySQL 5.7のワンクリックインストールとパスワードポリシーの変更方法

1.Mysqlスクリプトのワンクリックインストール [root@uat01 ~]# cat Inst...

JS 関数とコンストラクタを簡単に理解する

目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...

MySQLのlike演算子の詳細

1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...

VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....

MySQL DATEDIFF 関数を使用して 2 つの日付間の時間間隔を取得する方法

説明する2 つの日付間の時間間隔を返します。文法DateDiff(間隔、日付1、日付2 [、週の最初...

検索ナビゲーションバー付きの CSS サンプルコード

この記事では、CSS を使用して検索機能付きのナビゲーション バーを作成する方法を説明します。以下の...

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...