動手實現一個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,前端