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>
Copier après la connexion
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;
}Copier après la connexion
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(){
}
})Copier après la connexion
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(){
}
})Copier après la connexion
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
}
}Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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双按钮提示框
},Copier après la connexion
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;
}
}Copier après la connexion
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>
Copier après la connexion
puis définissez la fonction closeDialog pour modifier l'état de showDialog
closeDialog:function(){//关闭对话框
this.showDialog = false;
}Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
