Explication détaillée des étapes pour implémenter le composant de dialogue modal dans Vue

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter le composant de dialogue modal dans Vue. Quelles sont les précautions pour implémenter le composant de dialogue modal dans Vue. Voici un cas pratique, voyons. jetez un oeil.

é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 faire apparaître 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 dialogue Selon les habitudes précédentes, jetons d'abord un coup d'œil aux rendus

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 Un composant Vue global , 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, utilisons 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 les mêmes, 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 can. Ce sont : 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- dialogue dans le composant, sinon les données ne seront pas obtenues

Nous sommes dans les données Définissez ces propriétés dans

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

Ensuite, nous déclenchons l'événement de dialogue pop-up lorsque l'on clique sur le bouton 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 la nécessité de ? le composant enfant pour transmettre les 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 la 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 :

en v- Ajoutez @close-dialog="closeDialog" à la balise de dialogue pour écouter pour 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 dans le 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 des choses plus excitantes. . D'autres articles connexes sur le site chinois !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

A résumé de l'utilisation du module de journal nodejs winston

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!