動手實現一個vue中的模態對話框組件

寫在前面

對話框是很常用的組件 ， 在很多地方都會用到，一般我們可以使用自帶的alert來彈出對話框，但是假如是設計
出的圖該怎么辦呢 ，所以我們需要自己寫一個對話框，並且如果有很多地方都用到，那我們很有必要寫成一個通用
的組件形式，在需要的地方之間引用。

現在我們來動手實現一個對話框組件 ，按照之前的習慣，我們先看下實現的效果圖

1.首先，通過template定義一個組件

<template id="dialog">
		<div class="dialog">
			<div class="dialog_mask"></div>
			<div class="dialog_container">
				<div class="dialog_content">
					<div class="dialog_content_top">提示內容</div>
					<div class="dialog_btn">
						<a href="javascript:;" class="btn" @click="close">確定</a>
						<a href="javascript:;" class="btn" @click="close">取消</a>
						<a href="javascript:;" class="btn" @click="login">去登錄</a>
					</div>
				</div>
			</div>
		</div>
	</template>

並添加相應的對話框樣式

/*對話框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.component注冊一個全局Vue組件，我們將這個組件叫做v-dialog，然后通過template指定這個組件

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

3.最后，在我們需要的地方通過v-dialog標簽來引用這個組件

<v-dialog></v-dialog>

創建一個vue組件步驟大致就是這樣，但是，父組件和子組件該怎么進行通信呢？

這里主要使用props傳遞數據到子組件

修改如下上面的代碼，添加props屬性

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

可以看到我們是通過字符串數組來定義prop的，除此之外我們還可以用對象的形式來定義prop，
用來為組件的 prop 指定驗證規則，如果類型錯誤，在vue中會有警告，其中 type的值可以是這些：String Number Boolean Function Object Array Symbol

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

在組件模板中通過 v-if="showDialog"判斷是否顯示或隱藏對話框，通過 v-text="msg"綁定對話框提示內容，
v-if="type==1"用於判斷對話框類型 ，顯示相應的按鈕，代碼如下：

<template id="dialog">
		<div class="dialog" v-if="showDialog">
			<div class="dialog_mask"></div>
			<div class="dialog_container">
				<div class="dialog_content">
					<div class="dialog_content_top" v-text="msg">提示內容</div>
					<div class="dialog_btn">
						<a v-if="type==1" href="javascript:;" class="btn" @click="close">確定</a>
						<a v-if="type==2" href="javascript:;" class="btn" @click="close">取消</a>
						<a v-if="type==2" href="javascript:;" class="btn" @click="login">去登錄</a>
					</div>
				</div>
			</div>
		</div>
	</template>

在引用組件的地方添加 :show-dialog="showDialog" :msg="msg" :type="type"這幾個屬性，將其值傳遞給對話框組件

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

需要注意的是showDialog在組件中需要寫成show-dialog這種形式，不然會獲取不到數據
我們在data中定義這些屬性

data: {
		  		msg:'',
		  		showDialog:false,
		  		type:1,// 提示類型  1單按鈕提示框  2雙按鈕提示框
			},

然后，我們在按鈕點擊提交的時候觸發彈出對話框事件

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設置不同的提示消息

那么，我們該怎么關閉這個對話框呢 ，這里就涉及到子組件需要向父組件傳遞信息了

主要通過$emit來觸發父類事件，如：this.$emit('close-dialog');
然后在父類通過v-on來監聽子類觸發的事件，v-on:close-dialog="closeDialog" ,也可簡寫寫成@close-dialog="closeDialog"

代碼如下：
在v-dialog標簽中添加@close-dialog="closeDialog"監聽子組件觸發的事件

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

然后定義closeDialog函數修改showDialog 的狀態

				closeDialog:function(){//關閉對話框
					this.showDialog = false;
				}

這樣同樣也需要注意的是監聽函數closeDialog需要寫成close-dialog形式

ok，以上我們就實現了一個對話框組件

寫在后面

我們還可以使用slot來分發內容，這樣可以用來混合父組件的內容與子組件自己的模板，從而實現組件的高度復用，使得組件更加靈活
關於slot的用法可以查看文檔https://cn.vuejs.org/v2/guide/components.html#使用插槽分發內容

完整代碼已上傳到github，地址https://github.com/fozero/front-awesome/blob/master/vue/components/dialog.html，歡迎star~

相關鏈接
http://blog.csdn.net/haihuan2004/article/details/52618482

作者：fozero
聲明：原創文章，轉載請注明出處，謝謝！http://www.cnblogs.com/fozero/p/8546883.html
標簽：vue,前端