vue中的模態(tài)對(duì)話框組件實(shí)現(xiàn)過程
寫在前面
對(duì)話框是很常用的組件 ， 在很多地方都會(huì)用到，一般我們可以使用自帶的alert來(lái)彈出對(duì)話框，但是假如是設(shè)計(jì)出的圖該怎么辦呢 ，所以我們需要自己寫一個(gè)對(duì)話框，并且如果有很多地方都用到，那我們很有必要寫成一個(gè)通用的組件形式，在需要的地方之間引用。
現(xiàn)在我們來(lái)動(dòng)手實(shí)現(xiàn)一個(gè)對(duì)話框組件 ，按照之前的習(xí)慣，我們先看下實(shí)現(xiàn)的效果圖
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)簽來(lái)引用這個(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ù)組來(lái)定義prop的，除此之外我們還可以用對(duì)象的形式來(lái)定義prop，用來(lái)為組件的 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來(lái)觸發(fā)父類事件，如：this.$emit('close-dialog');然后在父類通過v-on來(lái)監(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;
}
這樣同樣也需要注意的是監(jiān)聽函數(shù)closeDialog需要寫成close-dialog形式
ok，以上我們就實(shí)現(xiàn)了一個(gè)對(duì)話框組件
寫在后面
我們還可以使用slot來(lái)分發(fā)內(nèi)容，這樣可以用來(lái)混合父組件的內(nèi)容與子組件自己的模板，從而實(shí)現(xiàn)組件的高度復(fù)用，使得組件更加靈活關(guān)于slot的用法可以查看文檔https://cn.vuejs.org/v2/guide/components.html#使用插槽分發(fā)內(nèi)容
完整代碼已上傳到github，地址https://github.com/fozero/front-awesome/blob/master/vue/components/dialog.html，歡迎star~,如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Vue是構(gòu)建Web界面的JavaScript庫(kù)，原稱為Vue.js，它可以通過簡(jiǎn)潔的API來(lái)提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
Vue項(xiàng)目打包優(yōu)化實(shí)踐指南(推薦!)
如果引入的庫(kù)眾多,那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?影響首開的體驗(yàn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包優(yōu)化實(shí)踐的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
vue 2.5.1 源碼學(xué)習(xí) 之Vue.extend 和 data的合并策略
這篇文章主要介紹了Vue.extend 和 data的合并策略 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了vue前端信息詳情頁(yè)模板梳理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法
百度了好久都沒辦法實(shí)現(xiàn)vue中一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面，甚至到google上搜索也是沒辦法的，最終還是找了高人親自指導(dǎo)，所以下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue 子組件修改data或調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的方法實(shí)例
在前端開發(fā)過程當(dāng)中,當(dāng)后臺(tái)服務(wù)器開發(fā)數(shù)據(jù)還沒完善,沒法與咱們交接時(shí),咱們習(xí)慣在本地寫上一個(gè)json文件做模擬數(shù)據(jù)測(cè)試代碼效果是否有問題,下面這篇文章主要給大家介紹了關(guān)于Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03