Benutzerdefinierter Bulletbox-Effekt von Vue (Bestätigungsfeld, Eingabeaufforderungsfeld)

<Vorlage>
  <Übergangsname="Bestätigung-Ausblenden">
    <div v-if="isShowConfirm" Klasse="meine-confirm" @click.stop="clickFun('clickCancel')">
      <div Klasse="Confirm-Content-Wrap" @click.stop>
        <h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>
        <p class="my-confirm-content">{{ Inhalt }}</p>
        <div Klasse="meine-Operation">
          <div v-if="Typ==='bestätigen'" Klasse="my-cancel-btn" @click="clickFun('clickCancel')">
            <p class="my-btn-text my-border-right">{{ Text abbrechen }}</p>
          </div>
          <div Klasse="confirm-btn" @click="clickFun('clickConfirm')">
            <p class="my-btn-text">{{ Bestätigungstext }}</p>
          </div>
        </div>
      </div>
    </div>
  </Übergang>
</Vorlage>
 
<Skripttyp="text/ecmascript-6">
Standard exportieren {
  Daten () {
    zurückkehren {
      isShowConfirm: false, // Wird verwendet, um die Anzeige/Ausblendung des gesamten Fensters zu steuern titleText: ‚Bedienungstipps‘, // Inhalt des Eingabeaufforderungsfelds: ‚Sagen Sie etwas ...‘, // Inhalt des Eingabeaufforderungsfelds cancelText: ‚Abbrechen‘, // Text der Abbrechen-Schaltfläche confirmText: ‚Bestätigen‘, // Text der Bestätigungsschaltfläche type: ‚bestätigen‘, // Gibt den Typ des Popup-Fensters an: confirm – Bestätigungs-Popup-Fenster (mit Abbrechen-Schaltfläche); alert – Benachrichtigungs-Popup-Fenster (ohne Abbrechen-Schaltfläche)
      outerData: null // Wird zum Aufzeichnen von von außen übertragenen Daten verwendet und kann auch zum Überwachen von Benutzerverhalten und Ereignisfunktionen verwendet werden, um festzustellen, welches Ereignis ausgelöst wurde.}
  },
  Methoden: {
    show (Inhalt, Konfiguration) {
      this.content = Inhalt || „Sag etwas …“
 
      wenn (Object.prototype.toString.call(config) === '[Objekt Objekt]') {
        // Stellen Sie sicher, dass der Benutzer ein Objekt übergibt this.titleText = config.titleText || ''
        this.cancelText = config.cancelText || 'Abbrechen'
        this.confirmText = config.confirmText || 'Bestätigen'
        this.type = config.type || 'bestätigen'
        this.outerData = config.data || null
      }
 
      this.isShowConfirm = true
    },
    versteckt () {
      this.isShowConfirm = false
      this.titleText = 'Bedienungstipps'
      this.cancelText = "Abbrechen"
      this.confirmText = "Bestätigen"
      this.type = "bestätigen"
      this.outerData = null
    },
    clickFun (Typ) {
      dies.$emit('userBehavior', Typ, dies.outerData)
      dies.versteckt()
    }
  }
}
</Skript>
 
<Stilbereich>
.meine-bestätigen {
  Position: fest;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Hintergrundfarbe: rgba(0, 0, 0, 0,5);
  Z-Index: 998;
  /* Dadurch wird verhindert, dass der schwarze Hintergrund erscheint, wenn der Benutzer lange auf den Bildschirm drückt, und dass das Problem mit der Schriftskalierung auftritt, wenn das iPhone horizontal und flach liegt.*/
  -Webkit-Textgrößenanpassung: 100 %;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
/*Animationen ein- und aussteigen*/
.bestätigen-ausblenden-eintreten-aktiv {
  Animation: Deckkraft 0,3 s;
}
.confirm-fade-enter-active .confirm-content-wrap {
  Animation: Maßstab 0,3 s;
}
.bestätigen-verblassen-aktiv lassen {
  Animation: OutOpacity 0,2 s;
}
 
/* Containerstil für Wrapping-Ebene */
.confirm-content-wrap {
  Position: absolut;
  oben: 28 %;
  links: 0;
  rechts: 0;
  Breite: 280px;
  Rand: 0 automatisch;
  Hintergrundfarbe: #fff;
  Rahmenradius: 5px;
  Z-Index: 999;
  Benutzerauswahl: keine;
}
 
/* Oberer Titelabschnitt */
.mein-Bestätigungstitel {
  Polsterung oben: 20px;
  Textausrichtung: zentriert;
  Schriftgröße: 20px;
  Schriftstärke: 500;
  Farbe: #333;
}
 
/* Mittlerer Inhaltsteil*/
.mein-confirm-content {
  Polsterung: 0 15px;
  Polsterung oben: 20px;
  Rand unten: 32px;
  Textausrichtung: zentriert;
  Schriftgröße: 16px;
  Farbe: #666;
  Zeilenhöhe: 1,5;
}
 
/* Stil der unteren Schaltfläche */
.meine-Operation {
  Anzeige: Flex;
  Rahmen oben: 1px durchgezogen #eee;
}
.meine-Operation .meine-Abbrechen-btn, .Bestätigen-btn {
  biegen: 1;
}
.meine-Operation .confirm-btn {
  Farbe: #ffb000;
}
.meine-Operation .mein-btn-text {
  Textausrichtung: zentriert;
  Schriftgröße: 16px;
  Rand: 8px 0;
  Polsterung: 6px 0;
}
 
/* Andere Dekorationsstile*/
.meine-Grenze-rechts {
  Rahmen rechts: 1px durchgezogen #eee;
}
 
/* Eingehende Animation*/
@keyframes Deckkraft {
  0% {
    Deckkraft: 0;
  }
  100 % {
    Deckkraft: 1;
  }
}
@keyframes skalieren {
  0% {
    transformieren: Skalierung(0);
  }
  60 % {
    transformieren: Skalierung(1.1);
  }
  100 % {
    transformieren: Skalierung(1);
  }
}
 
/* Animation beenden */
@keyframes outOpacity {
  0% {
    Deckkraft: 1;
  }
  100 % {
    Deckkraft: 0;
  }
}
</Stil>

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
…
//Eingabeaufforderungsfeld this.$refs.myDialog.show(content, {
        Typ: "Alarm",
        Bestätigungstext: 'OK',
        cancelText: 'Abbrechen',
        TitelText: '',
        Daten: null
      })

this.$refs.myDialog.show('Möchten Sie dieses Produkt einlösen?', {
            Typ: 'bestätigen',
            confirmText: 'Jetzt umtauschen',
            cancelText: 'Nein danke',
            TitelText: '',
            Daten: {shop: shop, betreiben: 'Austausch'}
          })

<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
    …
 
    changeData (Typ, Daten) {
      console.log('changeData',Daten)
      if (Typ === 'KlickBestätigen') {
        wenn (data.operate === 'Austausch') {
          // dies.reduceEnergy(data.shop)
          dieser.exchangeCoupon(data.shop)
        } sonst wenn (data.operate === 'downLoad') {
          Fenster.Standort = Daten.URL
        } sonst wenn (data.operate === 'login') {
          this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'})
          this.isLogin = false
        }
      }
},