So verwenden Sie die Toast-Popup-Komponente von Vue

Dieses Mal zeige ich Ihnen, wie Sie die Toast-Popup-Komponente von vue verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie die Toast-Popup-Komponente von vue verwenden?

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

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

1. Wird im Allgemeinen an mehreren Stellen verwendet – die wiederholte Referenz + Registrierung muss auf jeder Seite gelöst werden.

1. Wird im Allgemeinen für die Interaktion mit js verwendet – es ist nicht erforderlich, <toast :show="true" text="弹窗消息"></toast>

Heute werden wir die auf Vue basierende 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 Die Komponente

Sie können sehen, dass eine statische Popup-Ebene angezeigt wurde. Schauen wir uns als Nächstes an, wie dynamische Popups implementiert werden Beginnen Sie mit / Erstellen Sie im Verzeichnis src/toast/ 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 Zeile für Zeile erklären, sondern in Inline ändern 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 exportierenAnbei 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. Als nächstes probieren wir sie aus und sehen uns an

in vue

Eintragsdatei

(wenn 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
}

Wie Sie sehen, müssen wir 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 und dem aktuellen Popup sind sehr steif.

Lassen Sie uns toast/index hinzufügen. Die showToast-Funktion in .js wurde leicht geändert (es gibt Änderungen, wo es Kommentare gibt)

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 Vue-Stil erneut 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 Toast-Komponente ist zunächst fertig

Zusammenfassung

vue.extend-Funktion kann einen Komponentenkonstruktor generieren kann diese Funktion verwenden, um eine Vue-Komponenteninstanz zu erstellen

Sie können document.body.appendChild() verwenden, um dem Körper dynamisch Komponenten hinzuzufügenvue.prototype.$toast = showToast Sie können die Komponente global registrieren

1. Das Anzeigen von Animationen ist relativ einfach. Das Ausblenden von Animationen muss genügend Ausführungszeit für die Animation reservieren, bevor sie ausgeblendet werden kann

2. Die Quellcode-Adresse dieses Artikels finden Sie hier

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

4. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Dinge beachten Sie bitte andere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

5. Wie man js verwendet, um Ajax-Funktion und -Nutzung zu kapseln

6. Detaillierte Erläuterung gängiger integrierter Funktionen in JS
   

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Toast-Popup-Komponente von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!