Comment implémenter la boîte de dialogue modale vue

Cette fois, je vais vous montrer comment implémenter la boîte de dialogue vue modale, et quelles sont les précautions pour implémenter la boîte de dialogue vue modale. Ce qui suit est un cas pratique, jetons un coup d'œil.

écrit devant

La boîte de dialogue est un composant très courant et est utilisée à de nombreux endroits. Généralement, nous pouvons utiliser l'alerte intégrée pour afficher la boîte de dialogue. boîte de dialogue, mais que devons-nous faire s'il s'agit d'un diagramme conçu, nous devons donc écrire une boîte de dialogue nous-mêmes, et si elle est utilisée à de nombreux endroits, alors il est nécessaire que nous l'écrivions sous une forme de composant commun et la référençons entre les endroits où cela est nécessaire.

Implémentons maintenant un composant de boîte de dialogue. Selon les habitudes précédentes, jetons un coup d'œil aux rendus d'implémentation

1. Tout d'abord, définissez un composant via le modèle

<template id="dialog">
    <p class="dialog">
      <p class="dialog_mask"></p>
      <p class="dialog_container">
        <p class="dialog_content">
          <p class="dialog_content_top">提示内容</p>
          <p class="dialog_btn">
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">确定</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登录</a>
          </p>
        </p>
      </p>
    </p>
  </template>

et ajoutez le style de dialogue correspondant

/*对话框style*/
    .dialog{
    }
    .dialog_mask{
      position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
    }
    .dialog_container{
        background: #fff;
  width: 300px;
  height: 120px;
  position: relative;
  border-radius: 10px;
  margin: 0 auto;
    }
    .dialog_content{
      text-align: center;
  padding-top: 30px;
    }
    .dialog_btn{
      margin-top: 20px;
    }
    .dialog_btn a{
      background: yellow;
        padding: 2px 30px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
    width: 50px;
  display: inline-block;
    }
    .dialog_btn a:nth-child(2){
        margin-left: 20px;
    }

2. Enregistrez-vous en utilisant Vue.component Une Vue globale. composant, nous appelons ce composant v-dialog, puis spécifions ce composant via le modèle

Vue.component('v-dialog', {
      template: '#dialog',
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

3 Enfin, utilisez la balise v-dialog là où nous en avons besoin. Référencez ce composant <.>

<v-dialog></v-dialog>

Les étapes pour créer un composant vue sont à peu près comme ceci, mais comment le composant parent et le composant enfant communiquent-ils ?

Ici, nous utilisons principalement des props pour transmettre des données aux sous-composants

Modifiez le code ci-dessus comme suit et ajoutez l'attribut props

Vue.component('v-dialog', {
      template: '#dialog',
          props:['dialogShow','msg'],
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

Vous pouvez voir que nous définissons via un tableau de chaînes prop De plus, nous pouvons également définir prop sous forme d'objets pour spécifier des

règles de validation pour le prop du composant. Si le type est incorrect, il y aura un avertissement dans vue. , et la valeur de type peut être : Numéro de chaîne Fonction booléenne Objet Symbole de tableau

props: {
    name: String,
    showDialog: {
      type: Boolean,
      default: false
    }
   }

Dans le modèle de composant, utilisez

pour déterminer s'il faut afficher ou masquer la boîte de dialogue, et utilisez v-if="showDialog" pour lier le contenu de l'invite de la boîte de dialogue, v-text="msg"

v-if="type==1" est utilisé pour déterminer le type de boîte de dialogue et afficher le bouton correspondant. Le code est le suivant :

<template id="dialog">
    <p class="dialog" v-if="showDialog">
      <p class="dialog_mask"></p>
      <p class="dialog_container">
        <p class="dialog_content">
          <p class="dialog_content_top" v-text="msg">提示内容</p>
          <p class="dialog_btn">
            <a v-if="type==1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">确定</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登录</a>
          </p>
        </p>
      </p>
    </p>
  </template>

Ajoutez ces attributs là où le composant est référencé :

, passez sa valeur au composant de dialogue show-dialog="showDialog" :msg="msg" :type="type"

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type"></v-dialog>

Il est à noter que showDialog doit être écrit sous la forme de show -dialog dans le composant, sinon les données ne seront pas obtenues

Nous sommes dans data Définissez ces attributs dans

data: {
        msg:'',
        showDialog:false,
        type:1,// 提示类型 1单按钮提示框 2双按钮提示框
      },

Ensuite, nous déclenchons l'événement de dialogue pop-up lorsque le bouton est cliqué pour soumettre

submit:function(){
          //弹出对话框组件
          if(!this.isLogin){//未登录
            this.msg = "请先去登录再领取金额";
            this.showDialog = !this.showDialog;
            this.type = 2;
            return;
          }
          if(this.amount){
            if(this.amount<1 || this.amount>1000){
              this.msg = "输入金额不能低于1元大于1000";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }else{
              this.msg = "领取成功，请在账户中心查看";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }
          }else{
            this.msg = "领取金额不能为空";
            this.showDialog = !this.showDialog;
              this.type = 1;
          }
        }

De cette façon, nous pouvons faire apparaître le composant de dialogue, défini via msg Différents messages d'invite

Alors, comment fermer cette boîte de dialogue Cela implique le besoin ? pour que le composant enfant transmette des informations au composant parent

L'événement de la classe parent est principalement déclenché via $emit Par exemple :

Utilisez ensuite v-on dans la classe parent pour surveiller les événements déclenchés par le. sous-classe, this.$emit('close-dialog');, qui peut également être abrégé en v-on:close-dialog="closeDialog"@close-dialog="closeDialog"

Le code est le suivant :

dans v- Ajoutez @close-dialog="closeDialog" à la balise de dialogue pour écoutez les événements déclenchés par le sous-composant

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>

puis définissez la fonction closeDialog pour modifier l'état de showDialog

  closeDialog:function(){//关闭对话框
          this.showDialog = false;
        }

Cela nécessite également une attention particulière. La fonction d'écoute closeDialog doit être écrite en la forme de dialogue fermé

ok. Ci-dessus, nous avons implémenté un composant de dialogue

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez faire attention à php pour plus d'excitation. choses. Autres articles connexes sur le site chinois !

Lecture recommandée :

Analyse du cas d'utilisation de l'écouteur interne de Vue.js

Comment utiliser le chargement du composant Vue SSR

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!