Detaillierte Erläuterung der Anwendungsfälle der Vue+Toast-Popup-Komponente

Dieses Mal werde ich Ihnen den Anwendungsfall der Vue+Toast-Popup-Komponente ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vue+Toast-Popup-Komponente? Ein praktischer Fall, werfen wir einen Blick darauf.

Ich glaube, dass jeder normale Vue-Komponenten schreiben, definieren->Einführen-> verwenden kann, alles auf einmal erledigt ist, aber was ist, wenn wir heute eine Popup-Komponente anpassen möchten?

Lassen Sie uns zunächst die Eigenschaften (Anforderungen) der Popup-Komponente analysieren:

0 Lightweight – eine Komponente ist weniger als 1 KB groß (das tatsächliche Paket ist weniger als 0,8 KB). )

1 Im Allgemeinen an mehreren Stellen verwendet – wiederholte Referenz + Registrierung auf jeder Seite erforderlich

1 Im Allgemeinen mit js interagieren – kein Schreiben von <toast :show="true" text="弹窗消息"></toast>

Heute werden wir die Toast-Popup-Komponente basierend auf den beiden oben genannten Anforderungen implementieren. Das Bild unten ist das endgültige Rendering

1. Schreiben Sie zunächst eine gemeinsame Vue-Komponente

Dateispeicherort/src/toast/toast.vue

<template>
 <p class="wrap">我是弹窗</p>
</template>
<style scoped>
 .wrap{
 position: fixed;
 left: 50%;
 top:50%;
 background: rgba(0,0,0,.35);
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%,-50%);
 color:#fff;
 }
</style>

2 . Fügen Sie Komponenten in die Seiten ein, die wir verwenden müssen, um die Anzeige von Effekten und Fehlern zu erleichtern

3 Komponenten

Wie Sie sehen können, wurde eine statische Popup-Ebene angezeigt. Schauen wir uns als Nächstes an, wie dynamische Popups implementiert werden.

Lassen Sie uns Erstellen Sie zunächst eine statische Popup-Ebene in /src/toast/. Erstellen Sie unter dem Verzeichnis eine neue index.js und geben Sie dann den folgenden Code in index.js ein (da der Code stark gekoppelt ist, werde ich ihn nicht zeilenweise erklären Zeile, aber ändern Sie es in Inline-Kommentare)

Dateispeicherort/src/toast/index.js

<template>
 <p id="app">
 <toast></toast>
 </p>
</template>
<script>
 import toast from './toast/toast'
 export default {
 components: {toast},
 }
</script>

Standard-RegistryToast exportieren

Anbei ist ein offizielles Portal-Vue.extend-Dokument

4. Testversion

Zu diesem Zeitpunkt haben wir zunächst eine Toastkomponente fertiggestellt, die global registriert und dynamisch geladen werden kann Probieren Sie es aus und sehen Sie sich

in vue

Eintragsdatei an (falls durch Gerüst generiert, ist es ./src/main.js) Registrieren Sie die Komponente Dateispeicherort/src/main. js

import vue from 'vue'
// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './toast.vue'
// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(text, duration = 2000) {
 // 实例化一个 toast.vue
 const toastDom = new ToastConstructor({
 el: document.createElement('p'),
 data() {
 return {
 text:text,
 show:true
 }
 }
 })
 // 把 实例化的 toast.vue 添加到 body 里
 document.body.appendChild(toastDom.$el)
 // 过了 duration 时间后隐藏
 setTimeout(() => {toastDom.show = false} ,duration)
}
// 注册为全局组件的函数
function registryToast() {
 // 将组件注册到 vue 的 原型链里去,
 // 这样就可以在所有 vue 的实例里面使用 this.$toast()
 vue.prototype.$toast = showToast
}

OK Sehen Sie, wir müssen keine Komponenten mehr auf der Seite einführen und registrieren, wir können this.$toast() direkt verwenden.

5. Optimierung

Jetzt haben wir zunächst ein Popup-Fenster implementiert, es fehlt jedoch noch etwas an der Animation Popup und Ausblenden sind sehr steif

Ändern wir toast/index.js. Die showToast-Funktion wurde leicht geändert (es gibt Änderungen in den kommentierten Bereichen)

Dateispeicherort/src/toast/ index.js

import toastRegistry from './toast/index'
// 这里也可以直接执行 toastRegistry()
Vue.use(toastRegistry)
我们稍微修改一下使用方式,把 第二步 的引用静态组件的代码,改成如下
<template>
 <p id="app">
 <input type="button" value="显示弹窗" @click="showToast">
 </p>
</template>
<script>
 export default {
 methods: {
 showToast () {
 this.$toast('我是弹出消息')
 }
 }
 }
</script>

Ändern Sie dann den Stil von toast.vue

Dateispeicherort/src/toast/toast.vue

function showToast(text, duration = 2000) {
 const toastDom = new ToastConstructor({
 el: document.createElement('p'),
 data() {
 return {
 text:text,
 showWrap:true, // 是否显示组件
 showContent:true // 作用:在隐藏组件之前,显示隐藏动画
 }
 }
 })
 document.body.appendChild(toastDom.$el)
 // 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms)
 setTimeout(() => {toastDom.showContent = false} ,duration - 1250)
 // 过了 duration 时间后隐藏整个组件
 setTimeout(() => {toastDom.showWrap = false} ,duration)
}

Sie sind fertig, eine Toastkomponente ist zunächst abgeschlossen

Zusammenfassung

vue.extend-Funktion kann eine generieren Komponentenkonstruktor. Mit dieser Funktion können Sie eine Vue-Komponenteninstanz erstellen

Sie können document.body.appendChild() verwenden, um dem Körper dynamisch Komponenten hinzuzufügen

1. vue.prototype.$toast = showToast Sie können die Komponente global registrieren

2. Das Anzeigen von Animationen ist relativ einfach. Das Ausblenden von Animationen muss vor dem Ausblenden genügend Animationsausführungszeit reservieren

3. Die Quellcode-Adresse dieses Artikels finden Sie hier

4. Nichts davon ist wichtig, wichtig ist, diesem Artikel einen Stern zu geben

5. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Dinge achten Sie bitte auf andere php-chinesische Websites. Verwandte Artikel!

   Empfohlene Lektüre:

   Ausführliche Erläuterung der Anwendungsfälle für jQuery-Elementselektoren
   

   Mehrfachformüberprüfung der dynamischen Bindungskomponente der untergeordneten Komponente von Vue Implementierungsschritte Ausführliche Erklärung
   

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle der Vue+Toast-Popup-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!