vue中的模態(tài)對話框組件實現(xiàn)過程
更新時間：2018年05月01日 11:43:31 作者：
這篇文章主要介紹了vue中的模態(tài)對話框組件實現(xiàn)過程,通過定義組件，并添加相應的對話框樣式，需要的朋友可以參考下
寫在前面
對話框是很常用的組件 ， 在很多地方都會用到，一般我們可以使用自帶的alert來彈出對話框，但是假如是設計出的圖該怎么辦呢 ，所以我們需要自己寫一個對話框，并且如果有很多地方都用到，那我們很有必要寫成一個通用的組件形式，在需要的地方之間引用。
現(xiàn)在我們來動手實現(xiàn)一個對話框組件 ，按照之前的習慣，我們先看下實現(xiàn)的效果圖
1.首先，通過定義一個組件
并添加相應的對話框樣式
/*對話框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.使用注冊一個全局Vue組件，我們將這個組件叫做v-，然后通過指定這個組件
Vue.component('v-dialog', {
template: '#dialog',
data:function(){
return {
}
},
methods:{
},
created:function(){
}
})
3.最后，在我們需要的地方通過v-標簽來引用這個組件
創(chuàng)建一個vue組件步驟大致就是這樣，但是模態(tài)對話框是什么時候?qū)嵗膶υ捒?/strong>，父組件和子組件該怎么進行通信呢？
這里主要使用props傳遞數(shù)據(jù)到子組件
修改如下上面的代碼，添加props屬性
Vue.component('v-dialog', {
template: '#dialog',
props:['dialogShow','msg'],
data:function(){
return {
props: {
name: String,
showDialog: {
type: Boolean,
default: false
}
}
在組件模板中通過 v-if=""判斷是否顯示或隱藏對話框，通過 v-text="msg"綁定對話框提示內(nèi)容，
v-if="type==1"用于判斷對話框類型 ，顯示相應的按鈕，代碼如下：
在引用組件的地方添加 :show-="" :msg="msg" :type="type"這幾個屬性，將其值傳遞給對話框組件
需要注意的是在組件中需要寫成show-這種形式，不然會獲取不到數(shù)據(jù)
我們在data中定義這些屬性
data: {
msg:'',
showDialog:false,
type:1,// 提示類型 1單按鈕提示框 2雙按鈕提示框
},
然后，我們在按鈕點擊提交的時候觸發(fā)彈出對話框事件
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;
}
}
這樣，我們就能彈出對話框組件了，通過msg設置不同的提示消息
那么，我們該怎么關(guān)閉這個對話框呢 ，這里就涉及到子組件需要向父組件傳遞信息了
主要通過$emit來觸發(fā)父類事件，如：this.$emit('close-');
然后在父類通過v-on來監(jiān)聽子類觸發(fā)的事件，v-on:close-="" ,也可簡寫寫成@close-=""
代碼如下：
在v-標簽中添加@close-=""監(jiān)聽子組件觸發(fā)的事件
然后定義函數(shù)修改 的狀態(tài)
closeDialog:function(){//關(guān)閉對話框
this.showDialog = false;
}
這樣同樣也需要注意的是監(jiān)聽函數(shù)需要寫成close-形式
ok，以上我們就實現(xiàn)了一個對話框組件
寫在后面
我們還可以使用slot來分發(fā)內(nèi)容，這樣可以用來混合父組件的內(nèi)容與子組件自己的模板，從而實現(xiàn)組件的高度復用，使得組件更加靈活關(guān)于slot的用法可以查看文檔#使用插槽分發(fā)內(nèi)容
完整代碼已上傳到，地址，歡迎star~,如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！