Explication détaillée des cas d'utilisation du composant pop-up vue+toast

Cette fois, je vais vous apporter une explication détaillée du cas d'utilisation du composant pop-up vue+toast Quelles sont les précautions lors de l'utilisation du composant pop-up vue+toast. un cas pratique, jetons un coup d'oeil.

Je crois que tout le monde peut écrire des composants Vue ordinaires, définir->Introduire-> S'inscrire->, tout se fait en une seule fois, mais que se passe-t-il si nous voulons personnaliser un composant pop-up aujourd'hui ?

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 les références répétées + inscription sur chaque page

1 Interagissez généralement 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. L'image ci-dessous est le rendu final.

1. Écrivez d'abord un composant vue commun

Emplacement du fichier/src/toast/toast.vue

2. Introduire les composants dans les pages que nous devons utiliser pour faciliter la visualisation des effets et des erreurs

<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>

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

3. Implémentation Chargement dynamique des composants

Vous pouvez voir qu'une couche contextuelle statique a été affichée. Voyons ensuite comment implémenter une fenêtre contextuelle dynamique.Commençons d'abord sous le répertoire /src/toast/, créons un nouveau index.js, puis entrons le code suivant dans index.js (car le code est sévèrement couplé, je ne l'expliquerai pas ligne par ligne, mais changeons-le en commentaires en ligne) Emplacement du fichier/src/toast/index.js

exportation du registre par défautToast

Ci-joint un document officiel du portail vue.extend

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
}

4. Essai

À ce stade, nous avons initialement terminé un composant toast qui peut être enregistré globalement et chargé dynamiquement. Ensuite, essayons-le <.>

Enregistrez le composant file location/src/main.js

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

5. Optimisation

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>

Maintenant, nous avons initialement implémenté un pop. -up window Cependant, elle manque encore un peu de succès. Il manque une animation et le pop-up et le masquage actuels sont très rigides.

Nous modifions ensuite légèrement la fonction showToast dans toast/index.js. (il y a des changements dans les zones commentées)

Emplacement du fichier/src/toast/index.js Ensuite, modifiez le style de toast.vue

Fichier location/src/toast/toast.vue

Vous avez terminé, un composant toast est initialement terminé

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)
}

Résumé

<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>

La fonction vue.extend peut générer un constructeur de composant et vous pouvez utiliser cette fonction pour construire une instance de composant vue

peut utiliser document.body.appendChild() pour ajouter dynamiquement le composant au corps

vue.prototype.$toast = showToast Vous pouvez enregistrer le composant globalement
Afficher une animation est relativement simple, masquer l'animation doit réserver suffisamment de temps d'exécution de l'animation avant de la masquer
L'adresse du code source de cet article est ici
Rien de ce qui précède n'est important, l'important est de donner une étoile à cet article
Je pense que vous l'avez maîtrisé après avoir lu le cas dans cet article Pour en savoir plus méthodes passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

5. Lecture recommandée :

   Explication détaillée des cas d'utilisation du sélecteur d'éléments jQuery
   

   Vérification multiforme du composant de liaison dynamique Vue étapes de mise en œuvre Explication détaillée
   

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!