Vue implementiert scrollbaren Popup-Fenstereffekt

<template lang="html">
    <div v-if="anzeigen" Klasse="modal-bg" @click="closeModal">
      <div Klasse="modal_con">
        <div Klasse="modaler_Inhalt">
          <div Klasse="modal-container">
            <div Klasse="modal_main">
              <p class="modal-header">{{dataList.title}}</p>
              <div Klasse="Regeln_Text">
                <p
                  v-for="(Element, Index) in Datenliste.Regeln"
                  Klasse="Regeln_txt"
                  :Schlüssel="Index"
                >
                  {{ Artikel }}
                </p>
              </div>
          </div>
        </div>
          <div Klasse="Fußzeilenregeln">
            <div class="Tipps"></div>
              <div Klasse="Regeln_Schaltfläche">
                <div Klasse="Schaltfläche" @click="Modalschließen">
                  <p class="button_text">Ich verstehe</p>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'Popup',
  Requisiten: {
    zeigen: {
      Typ: Boolean,
      Standard: false
    },
  },
  Daten () {
    zurückkehren {
      Datenliste: {
        Regeln:
          ‚1. Dies sind die ersten Daten, ahh ...
          ‚2. Dies ist das zweite Datenstück, ahh ...
          ‚3. Dies ist das dritte Datenstück, ahh ...
          ‚4. Dies ist das vierte Datenelement aa ...
        ],
        belohnen: [
          „1. Tätigkeitsregeln Artikel 1 Daten Daten Daten Daten“,
          „2. Tätigkeitsregeln Artikel 2 Daten Daten Daten“,
          „2. Tätigkeitsregeln Artikel 3 Daten Daten Daten“
        ]

      }
    }
  },
  Methoden: {
    schließeModal() {
      dies.$emit('closeModal')
    },
  }
}
</Skript>

<style lang="css" scoped>
.modal_con {
  Breite: 80%;
  Höhe: 287px;
  Hintergrund: #ffffff;
  Überlauf: versteckt;
  Rand: 0 automatisch;

  Position: fest;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  Rahmenradius: 8px;
}
.modal_content {
  Höhe: 100%;
  Hintergrundfarbe: #fff;
}
.modal-bg {
  Breite: 100 %;
  Höhe: 100%;
  Hintergrundfarbe: rgba(0, 0, 0, 0,6);
  Position: fest;
  oben: 0;
  links: 0;
  Z-Index: 999;
}
.modal-container {
  Höhe: 78%;
  Textausrichtung: zentriert;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Überlauf-y: scrollen;
  /* ios erfordert das folgende Attribut*/
  -webkit-overflow-scrolling: berühren;
}

.rules_txt {
  Schriftgröße: 15px;
  Schriftfamilie: PingFangSC, PingFangSC-Regular;
  Schriftstärke: 400;
  Textausrichtung: Blocksatz;
  Farbe: #666666;
  Polsterung: 0 20px;
  Rand oben: 8px;
  Rand unten: 0;
}

.rules_txt:letztes-Kind {
  Polsterung unten: 40px;
}
.modal-header {
  Schriftgröße: 17px;
  Schriftfamilie: PingFang, PingFang-SC;
  Schriftstärke: fett;
  Textausrichtung: zentriert;
  Farbe: #333333;
  Rand: 0;
  Polsterung oben: 20px;
}
.Belohnungstitel {
  Schriftgröße: 17px;
  Schriftfamilie: PingFang, PingFang-SC;
  Schriftstärke: fett;
  Textausrichtung: zentriert;
  Farbe: #333333;
  Polsterung: 0;
  Rand oben: 14px;
  Rand unten: 6px;
}
.footer_rules {
  Breite: 100 %;
  Höhe: 22%;
  Position: absolut;
  unten: 0;
}
.Tipps {
  /* Breite: 100 %;
  Deckkraft: 0,6;
  Höhe: 49px;
  Hintergrund: linearer Farbverlauf (180 Grad, RGBA (255, 255, 255, 0,5), #ffffff);
  Textausrichtung: zentriert;
  Zeilenhöhe: 49px;
  Schriftgröße: 18px; */
}
.Regeln_Button {
  Breite: 100 %;
  Hintergrund: #ffffff;
  Polsterung unten: 20px;
  Rahmen unten rechts – Radius: 8px;
  Rahmen unten links – Radius: 8px;
}
.Taste {
  Breite: 90%;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Inhalt ausrichten: zentriert;
  Hintergrund: linearer Farbverlauf (270 Grad, #1283ff, #50a3ff);
  Rahmenradius: 4px;
  Textausrichtung: zentriert;
  Rand: 0 automatisch;
}
.Schaltflächentext {
  Schriftgröße: 15px;
  Schriftfamilie: PingFang, PingFang-SC;
  Schriftstärke: SC;
  Farbe: #ffffff;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Inhalt ausrichten: zentriert;
  Rand: 0;
  Polsterung: 12px 0;
}
.rules_con {
  Polsterung unten: 80px;
}
</Stil>

<!-- Popup-Fenster mit Ereignisregeln-->
 <Vorlage>
<div>
 <div @click="clickPopup">
            <span>Klicken Sie, um das Popup-Fenster zu öffnen</span>
          </div>
 <Popup
      v-show="istRegelnAnzeigen"
      @closeModal="isRulesShow = falsch"
      :show="istRegelnAnzeigen"
    >
    </Popup>
</div>
</Vorlage>
<Skript>
Popup aus „./Popup“ importieren
Standard exportieren {
Name:"Home",
Komponenten:
 Popup
},
Daten () {
    zurückkehren {
      isRulesShow:flase
      }
    },
    betrachten:
    isRulesShow (v) {
      wenn (v) {
        //Deaktiviere die Schiebemethode der Hauptseite in main.js
        dies.noScroll()
      } anders {
        //Die Hauptseite kann verschoben werden. this.canScroll()
      }
    },
  },
   Methoden:{
 //Popup-Fenster mit Aktivitätsregeln clickPopup () {
      this.isRulesShow = true
    },
 }
}
</Skript>
   <style lang="scss" scoped>
* {
  Touch-Aktion: Schwenk-Y;
}
</Stil>

//Das Verschieben des Popup-Fensters ist verboten Vue.prototype.noScroll = function () {
  var mo = Funktion (e) { e.preventDefault() }
  document.body.style.overflow = "versteckt"
  document.addEventListener('touchmove', mo, false,{ passive: false })// Seitenverschiebung deaktivieren}
 
//Das Popup-Fenster kann verschoben werden Vue.prototype.canScroll = function () {
  var mo = Funktion (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// Bildlaufleiste wird angezeigt document.removeEventListener('touchmove', mo, false,{ passive: false })
}

//Deaktiviere das Verschieben der Hauptseite this.noScroll()
//Die Hauptseite kann verschoben werden. this.canScroll()

//Fügen Sie auch Stile hinzu:
* {
  Touch-Aktion: Schwenk-Y;
}