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

創(chuàng)新互聯(lián) - 川西大數(shù)據(jù)中心，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，川西大數(shù)據(jù)中心，西南服務(wù)器托管，四川/成都大帶寬，服務(wù)器機(jī)柜，四川老牌ＩＤＣ服務(wù)商

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

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

實(shí)現(xiàn)步驟

1. 先搭建組件的html和css樣式，遮罩層和內(nèi)容層。
2. 定制彈窗內(nèi)容：彈窗組件通過(guò) slot 插槽接受從父組件那里傳過(guò)來(lái)彈窗內(nèi)容。
3. 定制彈窗樣式：彈窗組件通過(guò) props 接收從父組件傳過(guò)來(lái)的彈窗寬度，上下左右的位置。
4. 組件開(kāi)關(guān)：通過(guò)父組件傳進(jìn)來(lái)的 props 控制組件的顯示與隱藏，子組件關(guān)閉時(shí)通過(guò)事件 $emit 觸發(fā)父組件改變值。
   

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

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

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

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

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

這一步，只要理解了 slot 的作用以及用法，就沒(méi)有問(wèn)題了。

單個(gè)插槽：

這是在沒(méi)有slot傳進(jìn)來(lái)的時(shí)候，才顯示的彈窗內(nèi)容
上面是單個(gè)插槽也叫默認(rèn)插槽，在父組件中使用插槽的正確姿勢(shì)：

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

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

具名插槽：

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

 
 提示信息
 
 

 
 彈窗內(nèi)容
 

在父組件中的使用方式：

將彈窗組件引入要使用的組件中，并通過(guò) components 注冊(cè)成為組件。
父組件中彈窗組件插槽的使用方法如下。

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

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

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

3.通過(guò) props 控制彈窗顯隱&&定制彈窗style

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

因?yàn)閺棿敖M件都是引到別的組件里面去用的，為了適合不同組件場(chǎng)景中的彈窗，所以彈窗組件必須具備一定的可定制性，否則這樣的組件將毫無(wú)意義,下面介紹一下props的使用方式，以彈窗組件為例：

首先需要在被傳入的組件中定義props的一些特性，驗(yàn)證之類的。
然后在父組件中綁定props數(shù)據(jù)。

父組件中使用方式：

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

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

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

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

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

methods: {
 closeMyself() {
  this.$emit("on-close"); 
  //如果需要傳參的話，可以在"on-close"后面再加參數(shù)，然后在父組件的函數(shù)里接收就可以了。
 }
 }

父組件中的寫(xiě)法：

 
 
 //"on-close是監(jiān)聽(tīng)子組件的時(shí)間有沒(méi)有觸發(fā)，觸發(fā)的時(shí)候執(zhí)行closeDialog函數(shù)
methods:{
 closeDialog(){
 // this.status.isShowPublish=false;
 //把綁定的彈窗數(shù)組 設(shè)為false即可關(guān)閉彈窗
 },
}

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

彈窗組件代碼

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

總結(jié)

以上所述是小編給大家介紹的使用Vue組件實(shí)現(xiàn)一個(gè)簡(jiǎn)單彈窗效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！