Comment utiliser le composant pop-up toast de vue

Cette fois, je vais vous montrer comment utiliser le composant pop-up toast de vue. Quelles sont les précautions lors de l'utilisation du composant pop-up toast de vue. Voici un cas pratique, jetons un coup d'œil.

Tout d'abord, analysons les caractéristiques (exigences) du composant pop-up :

0. Léger : un composant fait moins de 1 Kib (le package réel est inférieur à 0,8k)<.>

1. Généralement utilisé à plusieurs endroits - besoin de résoudre la référence répétée + enregistrement sur chaque page

1. Généralement utilisé pour interagir avec js - pas besoin d'écrire

<toast :show="true" text="弹窗消息"></toast>Aujourd'hui, nous allons implémenter le composant pop-up toast basé sur Vue en fonction des deux exigences ci-dessus.

1. Écrivez d'abord un composant vue commun Emplacement du fichier/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. Introduire les composants dans les pages que nous devons utiliser pour faciliter la visualisation des effets et des erreurs

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

3. . Implémenter le chargement dynamique des composants Comme vous pouvez le voir, une couche contextuelle statique a été affichée. Voyons ensuite comment implémenter une fenêtre contextuelle dynamique.

Nous créons d'abord un nouveau index.js sous le répertoire /src/toast/, puis tapons le code suivant dans index.js (car le code est sévèrement couplé, nous ne l'expliquerons pas ligne par ligne et ne le modifierons pas aux commentaires en ligne) )

Emplacement du fichier/src/toast/index.js

exporter le registre par défautToast

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
}

Joindre un document officiel du portail vue.extend

4. Essai

À ce stade, nous avons initialement terminé un composant toast qui peut être enregistré globalement et chargé dynamiquement.

Dans le

fichier d'entrée

de vue (s'il est généré par un échafaudage, il s'agit de ./src/main.js

Emplacement du fichier/src/main.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>

Comme vous pouvez le constater, nous n'avons plus besoin d'introduire et d'enregistrer des composants dans la page, nous pouvons directement utiliser this.$toast().

5. Optimisation

Maintenant, nous avons initialement implémenté une fenêtre pop-up. Cependant, elle est encore un peu loin du succès. et le pop-up et le masquage actuels sont très rigides.Modifions légèrement la fonction showToast dans toast/index.js (il y a des changements dans les commentaires)

Emplacement du fichier/src/toast /index.js

Ensuite, modifiez le style de toast.vue

Emplacement du fichier/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)
}

Vous êtes terminé, un composant toast est initialement complété

<template>
 <p class="wrap" v-if="showWrap" :class="showContent ?&#39;fadein&#39;:&#39;fadeout&#39;">{{text}}</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;
 }
 .fadein {
 animation: animate_in 0.25s;
 }
 .fadeout {
 animation: animate_out 0.25s;
 opacity: 0;
 }
 @keyframes animate_in {
 0% {
 opacity: 0;
 }
 100%{
 opacity: 1;
 }
 }
 @keyframes animate_out {
 0% {
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
 }
</style>

Résumé

vue. La fonction extend peut générer un constructeur de composant qui peut être construit avec cette fonction. Pour créer une instance de composant vue

1. , vous pouvez utiliser document.body.appendChild() pour ajouter dynamiquement le composant au corps

2. vue.prototype .$toast = showToast Vous pouvez enregistrer le composant globalement

3. Afficher l'animation est relativement simple, masquer l'animation doit réserver suffisamment d'animation temps d'exécution avant de se cacher

4. L'adresse du code source de cet article est ici

5. Aucun de ce qui précède n'est important, l'important est de donner cet article est une star

6. Je crois que vous avez lu le cas de cet article Vous maîtrisez la méthode Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser js pour encapsuler la fonction et l'utilisation ajax

Explication détaillée des fonctions intégrées courantes dans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!