這篇文章主要介紹了怎么在vue中實(shí)現(xiàn)一個(gè)模態(tài)對(duì)話框組件,創(chuàng)新互聯(lián)小編覺得不錯(cuò),現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨創(chuàng)新互聯(lián)小編來看看吧!
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),恩平企業(yè)網(wǎng)站建設(shè),恩平品牌網(wǎng)站建設(shè),網(wǎng)站定制,恩平網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,恩平網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
1.首先,通過template定義一個(gè)組件
<template id="dialog"> <div class="dialog"> <div class="dialog_mask"></div> <div class="dialog_container"> <div class="dialog_content"> <div class="dialog_content_top">提示內(nèi)容</div> <div 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> </div> </div> </div> </div> </template>
并添加相應(yīng)的對(duì)話框樣式
/*對(duì)話框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注冊(cè)一個(gè)全局Vue組件,我們將這個(gè)組件叫做v-dialog,然后通過template指定這個(gè)組件
Vue.component('v-dialog', { template: '#dialog', data:function(){ return { } }, methods:{ }, created:function(){ } })
3.最后,在我們需要的地方通過v-dialog標(biāo)簽來引用這個(gè)組件
<v-dialog></v-dialog>
創(chuàng)建一個(gè)vue組件步驟大致就是這樣,但是,父組件和子組件該怎么進(jìn)行通信呢?
這里主要使用props傳遞數(shù)據(jù)到子組件
修改如下上面的代碼,添加props屬性
Vue.component('v-dialog', { template: '#dialog', props:['dialogShow','msg'], data:function(){ return { } }, methods:{ }, created:function(){ } })
可以看到我們是通過字符串?dāng)?shù)組來定義prop的,除此之外我們還可以用對(duì)象的形式來定義prop,用來為組件的 prop 指定驗(yàn)證規(guī)則,如果類型錯(cuò)誤,在vue中會(huì)有警告,其中 type的值可以是這些:String Number Boolean Function Object Array Symbol
props: { name: String, showDialog: { type: Boolean, default: false } }
在組件模板中通過 v-if="showDialog"
判斷是否顯示或隱藏對(duì)話框,通過 v-text="msg"
綁定對(duì)話框提示內(nèi)容,
v-if="type==1"用于判斷對(duì)話框類型 ,顯示相應(yīng)的按鈕,代碼如下:
<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">提示內(nèi)容</div> <div 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> </div> </div> </div> </div> </template>
在引用組件的地方添加 :show-dialog="showDialog" :msg="msg" :type="type"
這幾個(gè)屬性,將其值傳遞給對(duì)話框組件
<v-dialog :show-dialog="showDialog" :msg="msg" :type="type"></v-dialog>
需要注意的是showDialog在組件中需要寫成show-dialog這種形式,不然會(huì)獲取不到數(shù)據(jù)
我們?cè)赿ata中定義這些屬性
data: { msg:'', showDialog:false, type:1,// 提示類型 1單按鈕提示框 2雙按鈕提示框 },
然后,我們?cè)诎粹o點(diǎn)擊提交的時(shí)候觸發(fā)彈出對(duì)話框事件
submit:function(){ //彈出對(duì)話框組件 if(!this.isLogin){//未登錄 this.msg = "請(qǐng)先去登錄再領(lǐng)取金額"; 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 = "領(lǐng)取成功,請(qǐng)?jiān)谫~戶中心查看"; this.showDialog = !this.showDialog; this.type = 1; } }else{ this.msg = "領(lǐng)取金額不能為空"; this.showDialog = !this.showDialog; this.type = 1; } }
這樣,我們就能彈出對(duì)話框組件了,通過msg設(shè)置不同的提示消息
那么,我們?cè)撛趺搓P(guān)閉這個(gè)對(duì)話框呢 ,這里就涉及到子組件需要向父組件傳遞信息了
主要通過$emit來觸發(fā)父類事件,如:this.$emit('close-dialog');
然后在父類通過v-on來監(jiān)聽子類觸發(fā)的事件,v-on:close-dialog="closeDialog"
,也可簡(jiǎn)寫寫成@close-dialog="closeDialog"
代碼如下:
在v-dialog標(biāo)簽中添加@close-dialog="closeDialog"監(jiān)聽子組件觸發(fā)的事件
<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>
然后定義closeDialog函數(shù)修改showDialog 的狀態(tài)
closeDialog:function(){//關(guān)閉對(duì)話框 this.showDialog = false; }
以上就是創(chuàng)新互聯(lián)小編為大家收集整理的怎么在vue中實(shí)現(xiàn)一個(gè)模態(tài)對(duì)話框組件,如何覺得創(chuàng)新互聯(lián)網(wǎng)站的內(nèi)容還不錯(cuò),歡迎將創(chuàng)新互聯(lián)網(wǎng)站推薦給身邊好友。
本文題目:怎么在vue中實(shí)現(xiàn)一個(gè)模態(tài)對(duì)話框組件
文章位置:http://muchs.cn/article14/ghioge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷、企業(yè)建站、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)