シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。 実装効果:マウスが詳細行の概要アイコンに移動すると、現在の行の検査項目カードのポップアップウィンドウが表示され、マウスがポップアップウィンドウから外れるとポップアップウィンドウが閉じられます。 検査書類の詳細プロジェクト概要アイコンの上にマウスを移動します効果の実現データ内で宣言された変数 //アウトラインポップアップウィンドウ outlineDialog: false, //現在の行の標準サマリー standSummary: [], // アウトラインポップアップウィンドウの位置コントロール outlineCard: { ページY: null、 ページX: null、 表示: 「なし」 } 1. ポップアップコード outlineDialog: デフォルトは false、アウトラインポップアップウィンドウにロゴを表示 <!-- プロジェクト概要 --> <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> {{scope.row.equInspectplanItemList.length}} アイテム</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. マウスがポップアップカードから離れたときにイベントを終了する マウスがカードから外れると、カードの /** * マウスの標準要約を残す */ 離れる() { 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル
まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...
序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...
効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...
1. IE では、相対的な配置、つまり <div style="background...
1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...
目次スプレッド演算子とレスト演算子とは何ですか?配列スプレッド演算子残り演算子(コレクション関数)ス...
序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...
1. はじめにLinux でファイルの作成時刻が見つかるかどうかは、ファイル システムの種類によって...
1.Mysqlスクリプトのワンクリックインストール [root@uat01 ~]# cat Inst...
目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...
1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...
目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....
説明する2 つの日付間の時間間隔を返します。文法DateDiff(間隔、日付1、日付2 [、週の最初...
この記事では、CSS を使用して検索機能付きのナビゲーション バーを作成する方法を説明します。以下の...
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...