前言

最近在使用element-ui框架，用到了Dialog對話框組件，大致實現(xiàn)的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實現(xiàn)方式與大家分享一下，下面本文會帶著大家手摸手實現(xiàn)一個彈窗組件。

本文主要內(nèi)容會涉及到彈窗遮罩的實現(xiàn)，slot插槽的使用方式，props、$emit傳參，具體組件代碼也傳上去了。如果喜歡的話可以點波贊/關(guān)注，支持一下，希望大家看完本文可以有所收獲。

組件最后實現(xiàn)的效果

實現(xiàn)步驟

先搭建組件的html和css樣式，遮罩層和內(nèi)容層。

定制彈窗內(nèi)容：彈窗組件通過slot插槽接受從父組件那里傳過來彈窗內(nèi)容。

定制彈窗樣式：彈窗組件通過props接收從父組件傳過來的彈窗寬度，上下左右的位置。

組件開關(guān)：通過父組件傳進來的props控制組件的顯示與隱藏，子組件關(guān)閉時通過事件$emit觸發(fā)父組件改變值。

1.搭建組件的html和css樣式。

html結(jié)構(gòu)：一層遮罩層，一層內(nèi)容層，內(nèi)容層里面又有一個頭部title和主體內(nèi)容和一個關(guān)閉按鈕。

下面是組件中的html結(jié)構(gòu)，里面有一些后面才要加進去的東西，如果看不懂的話可以先跳過，

提示信息

彈窗內(nèi)容

下面是組件中的主要的css樣式，里面都做了充分的注釋，主要通過z-index和background達到遮罩的效果，具體內(nèi)容的css可以根據(jù)自己的需求來設(shè)置。

// 最外層 設(shè)置position定位

.dialog {

position: relative;

color: #2e2c2d;

font-size: 16px;

}

// 遮罩 設(shè)置背景層，z-index值要足夠大確保能覆蓋，高度 寬度設(shè)置滿 做到全屏遮罩

.dialog-cover {

background: rgba(0,0,0, 0.8);

position: fixed;

z-index: 200;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

// 內(nèi)容層 z-index要比遮罩大，否則會被遮蓋，

.dialog-content{

position: fixed;

top: 35%;

// 移動端使用felx布局

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

z-index: 300;

}

---

2. 通過slot定制彈窗內(nèi)容

這一步，只要理解了slot的作用以及用法，就沒有問題了。

單個插槽：

這是在沒有slot傳進來的時候，才顯示的彈窗內(nèi)容

上面是單個插槽也叫默認插槽，在父組件中使用插槽的正確姿勢：

這是一些初始內(nèi)容

這是更多的初始內(nèi)容

ps:如果子組件里面包含slot插槽，那么上面的p標(biāo)簽的內(nèi)容將會被丟棄。

具名插槽：

所謂的具名插槽，即為slot標(biāo)簽賦一個name屬性，具名插槽可以父組件中不同的內(nèi)容片段放到子組件的不同地方，具名插槽還是可以擁有一個默認插槽。下面可以看一下彈窗組件插槽的使用方式：

提示信息

彈窗內(nèi)容

在父組件中的使用方式：

將彈窗組件引入要使用的組件中，并通過components注冊成為組件。

父組件中彈窗組件插槽的使用方法如下。

插入到name為header的slot標(biāo)簽里面

這里是內(nèi)容插入到子組件的slot的name為main里面，可以在父組件中添加class定義樣式，事件類型等各種操作

關(guān)于組件中用到的插槽的介紹就到這里了，插槽在彈窗組件中的應(yīng)用是一個典型的栗子，可以看到插槽作用相當(dāng)強大，而插槽本身的使用并不難，同學(xué)們愛上插槽了沒有？

---

3.通過props控制彈窗顯隱&&定制彈窗style

psops是Vue中父組件向子組件傳遞數(shù)據(jù)的一種方式，不熟悉的小伙伴們可以看一下props文檔。

因為彈窗組件都是引到別的組件里面去用的，為了適合不同組件場景中的彈窗，所以彈窗組件必須具備一定的可定制性，否則這樣的組件將毫無意義,下面介紹一下props的使用方式，以彈窗組件為例：

首先需要在被傳入的組件中定義props的一些特性，驗證之類的。

然后在父組件中綁定props數(shù)據(jù)。

export default {

props: {

isShow: {

//彈窗組件是否顯示 默認不顯示

type: Boolean,

default: false,

required:true, //必須

},

//下面這些屬性會綁定到div上面 詳情參照上面的html結(jié)構(gòu)

// 如： :style="{top:topDistance+'%',width:widNum+'%'}"

widNum:{

//內(nèi)容寬度

type: Number,

default:86.5

},

leftSite:{

// 左定位

type: Number,

default:6.5

},

topDistance: {

//top上邊距

type: Number,

default:35

},

pdt:{

//上padding

type: Number,

default:22

},

pdb:{

//下padding

type: Number,

default:47

}

},

}

父組件中使用方式：

ps：props傳遞數(shù)據(jù)不是雙向綁定的，而是單向數(shù)據(jù)流，父組件的數(shù)據(jù)變化時，也會傳遞到子組件中，這就意外著我們不應(yīng)該在子組件中修改props。所以我們在關(guān)閉彈窗的時候就需要通過$emit來修改父組件的數(shù)據(jù)，然后數(shù)據(jù)會自動傳到子組件中。

現(xiàn)在基本上彈窗組件都已實現(xiàn)的差不多了，還差一個彈窗的關(guān)閉事件，這里就涉及到子組件往父組件傳參了。

4.$emit觸發(fā)父組件事件修改數(shù)據(jù)，關(guān)閉彈窗

Vue中在子組件往父組件傳參，很多都是通過$emit來觸發(fā)父組件的事件來修改數(shù)據(jù)。

在子組件中，在點擊關(guān)閉，或者遮罩層的時候觸發(fā)下面這個方法：

methods: {

closeMyself() {

this.$emit("on-close");

//如果需要傳參的話，可以在"on-close"后面再加參數(shù)，然后在父組件的函數(shù)里接收就可以了。

}

}

父組件中的寫法：

//"on-close是監(jiān)聽子組件的時間有沒有觸發(fā)，觸發(fā)的時候執(zhí)行closeDialog函數(shù)

methods:{

closeDialog(){

// this.status.isShowPublish=false;

//把綁定的彈窗數(shù)組 設(shè)為false即可關(guān)閉彈窗

},

}

可以用彈窗組件實現(xiàn)下列這種信息展示，或者事件交互：

上面是把彈窗的每個步驟拆分開來，一步步解析的，每一步都說的比較清楚了，具體連起來的話，可以看看代碼，再結(jié)合文章就能理的很清楚了。

小結(jié)：

這個彈窗組件，實現(xiàn)起來一點都不難，我這里主要是提供了一個實現(xiàn)方式，當(dāng)項目中有需要的話，大家也可以自己擼一個出來，以上就是本文的內(nèi)容了，希望同學(xué)們看完能有所收獲。

希望看完的朋友可以點個喜歡，也可以關(guān)注一下我，您的支持是對我最大的鼓勵。

最后：如需轉(zhuǎn)載，請放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態(tài)，寫的不好之處，不撕逼，但是歡迎指點。

以上2018.4.21

參考資料：

總結(jié)

以上是生活随笔為你收集整理的vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。