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の使い方の詳しい説明

推薦する

nginx パニック問題の解決方法の詳細な説明

nginx パニック問題に関しては、まず nginx の起動プロセス中に、マスター プロセスが構成フ...

JSはストップウォッチタイマーを実装します

この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...

docker を使用して複数のネットワーク インターフェースを持つコンテナーを起動する方法の例

コンテナにネットワークインターフェースを追加する1 デフォルトのネットワークモードでコンテナを実行す...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

PostgreSQL正規表現の一般的な機能の概要

PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...

vue-tableは追加と削除を実装します

この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...

列名を知らなくてもMySQLインジェクションを詳細に解説

序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

MySQL inndbジョイントインデックスを正しく使用する方法を徹底的に理解するためのケーススタディ

最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...

CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...

Linux の Docker コンテナで bash を終了する 2 つの方法

bash を終了する場合は、次の 2 つのオプションがあります。最初のもの: Ctrl + d を押...

HTML タグ sup と sub の応用の紹介

HTML タグ: 上付き文字HTML では、<sup> タグは上付き文字のテキストを定義...

Linuxでディレクトリを効率的に切り替える方法

Linux でディレクトリを切り替えるとなると、誰もが間違いなくcdコマンドを思い浮かべるでしょう。...

CSSページ下部固定を実現する8つの方法の詳細な説明

ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...