Vue implementiert Beispielcode für benutzerdefinierte „modales Popup-Fenster“-Komponente

<Vorlage>
  <Übergangsgruppenname='verblassen'>
    <!-- Popup-Fenster verlassen-->
    <div Klasse="Dialog beenden"
         Schlüssel="1"
         @click="istBeenden = false"
         v-if="istBeenden"
         @touchmove.prevent>
    </div>
    <div Klasse="Beenden-Box"
         v-show="istBeenden"
         Schlüssel="2">
      <img :src="Bild-URL"
           :alt="imgLoadTip">
           <div class="quit_title">{{title}}</div>
      <p>{{Inhalt}}</p>
      <button class="quit_btn" @click="leftClick">{{btnText}}</button>
      <button class="quit_close" @click="rightClick">{{rightText}}</button>
    </div>
  </Übergangsgruppe>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Popup',
  Daten () {
    zurückkehren {
      isQuit: falsch,
      imgUrl: '',
      Titel: '',
      Inhalt: '',
      btnText: '',
      rechterText: ''
    }
  },
  Methoden: {
    leftClick () {
      dies.leftBtn()
      this.isQuit = false
    },
    Rechtsklick () {
      dies.rightBtn()
      this.isQuit = false
    }
  }
}
</Skript>
<style lang="scss" scoped>
// Popup-Fenster verlassen.fade-enter,
.fade-leave-active {
  Deckkraft: 0;
}
.fade-enter-active,
.fade-leave-active {
  Übergang: Deckkraft 0,35 s;
}
// Globales Popup-Fenster.quit_dialog {
  Hintergrund: rgba(0,0,0,.5);
  Position: fest;
  oben: 0;
  links: 0;
  Höhe: 100%;
  Breite: 100 %;
  Z-Index: 10000;
}
 
.quit_box {
  Breite: 700px;
  Hintergrund: #fff;
  Position: fest;
  oben: 50 %;
  links: 50%;
  Rand links: -350px;
  Rand oben: -190px;
  Z-Index: 10001;
  Rahmenradius: 10px;
  Textausrichtung: zentriert;
  Polsterung: 50px;
  img{
    Breite: 80px;
  }
 .quit_title{
      Farbe: #666;
      Schriftgröße: 28px;
      Rand: 45px 0px;
  }
  Taste {
    Rahmenradius: 32px;
    Polsterung: 20px 0px;
    Schriftgröße: 26px;
    Rahmenradius: 8px;
    Breite: 214px;
  }
  .quit_btn{
    Farbe: #03BA82;
    Hintergrund: #fff;
    Rand: 1px durchgezogen #03BA82;
    Rand rechts: 32px;
  }
  .beenden_schließen {
    Hintergrund: linearer Farbverlauf (0 Grad, #03BA82, #01D695);
    Kastenschatten: 0px 3px 4px 0px rgba (1, 84, 58, 0,27);
    Rand: 1px durchgezogen #03BA82;
    Farbe: #fff;
  }
}
</Stil>

Vue von „vue“ importieren
Grasp importieren aus '../components/QuitDialog/QuitDialog'
 
const PopupBox = Vue.extend(Grasp).
 
Grasp.install = Funktion (Daten) {
  let Instanz = neue PopupBox({
    Daten
  }).$mount()
 
  Dokument.Body.AppendChild(Instanz.$el)
 
  Vue.nextTick(() => {
    Instanz.isQuit = true
    //isQuit entspricht isQuit in der Popup-Komponente und wird zur Steuerung der Sichtbarkeit verwendet})
}
 
Standard-Grasp exportieren

Vue von „vue“ importieren
Popup aus „./api/quitDialog“ importieren
Vue.prototype.$popup = Popup.install

Methoden: {
    grabBtn () {
      dies.$grasp({
        imgUrl: require('../../assets/home/quits.png'), // Oberes Bild.
        imgLoadTip: „Bild wird geladen …“,
        Inhalt: 'Warme Tipps',
        Titel: 'Hinweis: Diese Lernaufgabe ist nicht abgeschlossen. Bestätigen Sie den Abschluss',
        btnText: 'Grausamer Abgang',
        rightText: 'Weiter studieren',
        // Linksklick-Ereignis leftBtn: () => {
          dies.$store.dispatch('user/logout').then(() => {
            dies.$signalr.LogoutPad()
            this.$signalr.SendMsg(2, 0, 'System verlassen')
            dies.$router.push('/login')
          })
        },
        // Rechtsklick-Ereignis rightBtn: () => {}
      })
    }
}