シナリオ: 検査文書には 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 のインストールと設定のグラフィックチュートリアル
nginx パニック問題に関しては、まず nginx の起動プロセス中に、マスター プロセスが構成フ...
この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...
コンテナにネットワークインターフェースを追加する1 デフォルトのネットワークモードでコンテナを実行す...
まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...
1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...
PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...
この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...
序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...
音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...
bash を終了する場合は、次の 2 つのオプションがあります。最初のもの: Ctrl + d を押...
HTML タグ: 上付き文字HTML では、<sup> タグは上付き文字のテキストを定義...
Linux でディレクトリを切り替えるとなると、誰もが間違いなくcdコマンドを思い浮かべるでしょう。...
ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...