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;
}
</スタイル>

<!-- イベントルールのポップアップウィンドウ-->
 <テンプレート>
<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;
}
</スタイル>

//ポップアップボックスはスライド禁止です 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;
}