Maison > Article > interface Web > 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>
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"
<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'inviteAlors, comment fermer cette boîte de dialogue Cela implique le besoin ? pour que le composant enfant transmette des informations au composant parentL'é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"
<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!