Vue はスクロール可能なポップアップウィンドウ効果を実装します

Vue はスクロール可能なポップアップウィンドウ効果を実装します

この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

これは最初の実装です

効果画像:

ポップアップウィンドウコード:

ポップアップ

<テンプレート lang="html">
    <div v-if="表示" class="modal-bg" @click="閉じるモーダル">
      <div class="modal_con">
        <div class="modal_content">
          <div class="modal-container">
            <div class="modal_main">
              <p class="modal-header">{{dataList.title}}</p>
              <div class="rules_text">
                <p
                  v-for="(item, index) in dataList.rules"
                  クラス="rules_txt"
                  :key="インデックス"
                >
                  {{ アイテム }}
                </p>
              </div>
          </div>
        </div>
          <div class="footer_rules">
            <div class="tips"></div>
              <div class="rules_button">
                <div class="button" @click="closeModal">
                  <p class="button_text">了解しました</p>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'ポップアップ'、
  小道具: {
    見せる: {
      タイプ: ブール値、
      デフォルト: false
    },
  },
  データ () {
    戻る {
      データリスト: {
        ルール:
          「1. これは最初のデータです、ああ...」
          「2. これは2番目のデータです、ああ...」
          「3. これは3番目のデータです、あぁ…」
          「4. これは 4 番目のデータです...」
        ]、
        褒美: [
          「1. 活動規則 第1条 データ データ データ データ」、
          「2. 活動規則 第2条 データデータデータ」
          「2. 活動規則 第3条 データデータデータ」
        ]

      }
    }
  },
  メソッド: {
    モーダルを閉じる() {
      this.$emit('closeModal')
    },
  }
}
</スクリプト>

<style lang="css" スコープ>
.modal_con {
  幅: 80%;
  高さ: 287px;
  背景: #ffffff;
  オーバーフロー: 非表示;
  マージン: 0 自動;

  位置: 固定;
  上位: 50%;
  左: 50%;
  変換: translate(-50%, -50%);
  境界線の半径: 8px;
}
.modal_content {
  高さ: 100%;
  背景色: #fff;
}
.modal-bg {
  幅: 100%;
  高さ: 100%;
  背景色: rgba(0, 0, 0, 0.6);
  位置: 固定;
  上: 0;
  左: 0;
  zインデックス: 999;
}
.modal-container {
  高さ: 78%;
  テキスト配置: 中央;
  ディスプレイ: フレックス;
  flex-direction: 列;
  overflow-y: スクロール;
  /* ios には次の属性が必要です*/
  -webkit-オーバーフロースクロール: タッチ;
}

.rules_txt {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 両端揃え;
  色: #666666;
  パディング: 0 20px;
  上マージン: 8px;
  下マージン: 0;
}

.rules_txt:最後の子{
  パディング下部: 40px;
}
.modal-header {
  フォントサイズ: 17px;
  フォントファミリー: PingFang、PingFang-SC;
  フォントの太さ: 太字;
  テキスト配置: 中央;
  色: #333333;
  マージン: 0;
  パディング上部: 20px;
}
.報酬タイトル{
  フォントサイズ: 17px;
  フォントファミリー: PingFang、PingFang-SC;
  フォントの太さ: 太字;
  テキスト配置: 中央;
  色: #333333;
  パディング: 0;
  上マージン: 14px;
  下マージン: 6px;
}
.footer_rules {
  幅: 100%;
  高さ: 22%;
  位置: 絶対;
  下部: 0;
}
.ヒント {
  /* 幅: 100%;
  不透明度: 0.6;
  高さ: 49px;
  背景: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #ffffff);
  テキスト配置: 中央;
  行の高さ: 49px;
  フォントサイズ: 18px; */
}
.rules_button {
  幅: 100%;
  背景: #ffffff;
  パディング下部: 20px;
  右下の境界線の半径: 8px;
  左下の境界線の半径: 8px;
}
。ボタン {
  幅: 90%;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  コンテンツの位置を中央揃えにします。
  背景: 線形グラデーション(270度, #1283ff, #50a3ff);
  境界線の半径: 4px;
  テキスト配置: 中央;
  マージン: 0 自動;
}
.ボタンテキスト{
  フォントサイズ: 15px;
  フォントファミリー: PingFang、PingFang-SC;
  フォントの太さ: SC;
  色: #ffffff;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  コンテンツの位置を中央揃えにします。
  マージン: 0;
  パディング: 12px 0;
}
.rules_con {
  パディング下部: 80px;
}
</スタイル>

Home.vue ページでポップアップ ウィンドウを使用します。

<!-- イベントルールのポップアップウィンドウ-->
 <テンプレート>
<div>
 <div @click="クリックポップアップ">
            <span>クリックするとポップアップウィンドウが開きます</span>
          </div>
 <ポップアップ
      v-show="isRulesShow"
      @closeModal="isRulesShow = false"
      :show="isRulesShow"
    >
    </ポップアップ>
</div>
</テンプレート>
<スクリプト>
'./Popup' から Popup をインポートします
エクスポートデフォルト{
名前:"ホーム",
コンポーネント:
 ポップアップ
},
データ () {
    戻る {
      isRulesShow: フラグ
      }
    },
    時計:
    isRulesShow (v) {
      もし(動詞){
        //main.js でメインページのスライドメソッドを無効にする
        this.noScroll()
      } それ以外 {
        //メインページはスライドできます this.canScroll()
      }
    },
  },
   方法:{
 //アクティビティルールポップアップウィンドウ clickPopup () {
      this.isRulesShow = true
    },
 }
}
</スクリプト>
   <style lang="scss" スコープ>
* {
  タッチアクション:パン-y;
}
</スタイル>

ポップアップウィンドウ内の本文が一緒にスクロールしてしまう問題を解決

main.js内

//ポップアップボックスはスライド禁止です Vue.prototype.noScroll = function () {
  var mo = 関数 (e) { e.preventDefault() }
  document.body.style.overflow = '隠し'
  document.addEventListener('touchmove', mo, false,{passive: false })// ページのスライドを無効にする}
 
//ポップアップボックスはスライドできます Vue.prototype.canScroll = function () {
  var mo = 関数 (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// スクロールバーが表示されます document.removeEventListener('touchmove', mo, false,{passive: false })
}

ページを使用する場合:

//メインページのスライドを無効にする this.noScroll()
//メインページはスライドできます this.canScroll()

//スタイルも追加します:
* {
  タッチアクション:パン-y;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueコンポーネントを使用してシンプルなポップアップ効果を実装する
  • vue.js ポップアップコンポーネントに関する知識ポイントのまとめ
  • 素晴らしい Vue ポップアップ コンポーネント
  • Vueポップアップメッセージコンポーネントの使い方
  • VUEは、自由にドラッグできるポップアップコンポーネントを実装しています。
  • Vueは、「詳細を表示」ボタンをクリックして詳細リストをポップアップウィンドウに表示する操作を実装します。
  • Vue のトーストポップアップコンポーネントの詳細な例
  • Vue でポップアップ コンポーネントを閉じるときに操作を破棄して非表示にする
  • Vueがポップアップしたら、携帯電話のリターンキーを押してポップアップ機能を閉じます(ページはジャンプしません)
  • VUEを使用して、テーブル内の文字数が5文字を超える場合はテキスト情報を非表示にし、マウスを動かすとすべての文字を表示します。

<<:  MySQL explain クエリ命令情報の取得原理と例

>>:  xshell を使用して VMware で Linux に接続する方法 (2 つの方法)

推薦する

MYSQLでリモートアクセス権限を有効にする方法

1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...

Linux statコマンドの使用

1. コマンドの紹介stat コマンドは、ファイルまたはファイル システムに関する詳細情報を表示する...

Linuxでawkを使用する方法の詳細な説明

awk を学ぶ前に、sed、grep、tr、cut などのコマンドを学んでおく必要があります。これら...

JavaScript におけるセミコロンの詳細

序文JavaScript ではセミコロンはオプションであり、使用するかどうかは主にコーディング スタ...

Nginx における accept lock の仕組みと実装の詳細な説明

序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

簡単です。チュートリアルを見てください。ブロガー1. まずdockerを起動するサービスdocker...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

CentOS での MySQL ログイン 1045 問題を解決する

アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...

Xshell にショートカット コマンドを追加する方法

便利なターミナル エミュレーターである Xshell は、開発者がホスト サーバーをリモート管理する...