摘要:前言最近在使用框架,用到了對話框組件,大致實(shí)現(xiàn)的效果,跟我之前自己在移動端項(xiàng)目里面弄的一個彈窗組件差不太多。現(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了,還差一個彈窗的關(guān)閉事件,這里就涉及到子組件往父組件傳參了。
前言
最近在使用element-ui框架,用到了Dialog對話框組件,大致實(shí)現(xiàn)的效果,跟我之前自己在移動端項(xiàng)目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實(shí)現(xiàn)方式與大家分享一下,下面本文會帶著大家手摸手實(shí)現(xiàn)一個彈窗組件。
本文主要內(nèi)容會涉及到彈窗遮罩的實(shí)現(xiàn),slot插槽的使用方式,props、$emit傳參,具體組件代碼也傳上去了。如果喜歡的話可以點(diǎn)波贊/關(guān)注,支持一下,希望大家看完本文可以有所收獲。
個人博客了解一下:obkoro1.com組件最后實(shí)現(xiàn)的效果 實(shí)現(xiàn)步驟
先搭建組件的html和css樣式,遮罩層和內(nèi)容層。
定制彈窗內(nèi)容:彈窗組件通過slot插槽接受從父組件那里傳過來彈窗內(nèi)容。
定制彈窗樣式:彈窗組件通過props接收從父組件傳過來的彈窗寬度,上下左右的位置。
組件開關(guān):通過父組件傳進(jì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),里面有一些后面才要加進(jìn)去的東西,如果看不懂的話可以先跳過,
提示信息 彈窗內(nèi)容
下面是組件中的主要的css樣式,里面都做了充分的注釋,主要通過z-index和background達(dá)到遮罩的效果,具體內(nèi)容的css可以根據(jù)自己的需求來設(shè)置。
---
2. 通過slot定制彈窗內(nèi)容這一步,只要理解了slot的作用以及用法,就沒有問題了。
單個插槽:這是在沒有slot傳進(jìn)來的時候,才顯示的彈窗內(nèi)容
上面是單個插槽也叫默認(rèn)插槽,在父組件中使用插槽的正確姿勢:
這是一些初始內(nèi)容
這是更多的初始內(nèi)容
ps:如果子組件里面包含slot插槽,那么上面的p標(biāo)簽的內(nèi)容將會被丟棄。
具名插槽:所謂的具名插槽,即為slot標(biāo)簽賦一個name屬性,具名插槽可以父組件中不同的內(nèi)容片段放到子組件的不同地方,具名插槽還是可以擁有一個默認(rèn)插槽。下面可以看一下彈窗組件插槽的使用方式:
提示信息 彈窗內(nèi)容
在父組件中的使用方式:
將彈窗組件引入要使用的組件中,并通過components注冊成為組件。
父組件中彈窗組件插槽的使用方法如下。
插入到name為header的slot標(biāo)簽里面這里是內(nèi)容插入到子組件的slot的name為main里面,可以在父組件中添加class定義樣式,事件類型等各種操作
關(guān)于組件中用到的插槽的介紹就到這里了,插槽在彈窗組件中的應(yīng)用是一個典型的栗子,可以看到插槽作用相當(dāng)強(qiáng)大,而插槽本身的使用并不難,同學(xué)們愛上插槽了沒有?
---
3.通過props控制彈窗顯隱&&定制彈窗stylepsops是Vue中父組件向子組件傳遞數(shù)據(jù)的一種方式,不熟悉的小伙伴們可以看一下props文檔。
因?yàn)閺棿敖M件都是引到別的組件里面去用的,為了適合不同組件場景中的彈窗,所以彈窗組件必須具備一定的可定制性,否則這樣的組件將毫無意義,下面介紹一下props的使用方式,以彈窗組件為例:
首先需要在被傳入的組件中定義props的一些特性,驗(yàn)證之類的。
然后在父組件中綁定props數(shù)據(jù)。
父組件中使用方式:
ps:props傳遞數(shù)據(jù)不是雙向綁定的,而是單向數(shù)據(jù)流,父組件的數(shù)據(jù)變化時,也會傳遞到子組件中,這就意外著我們不應(yīng)該在子組件中修改props。所以我們在關(guān)閉彈窗的時候就需要通過$emit來修改父組件的數(shù)據(jù),然后數(shù)據(jù)會自動傳到子組件中。
現(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了,還差一個彈窗的關(guān)閉事件,這里就涉及到子組件往父組件傳參了。
4.$emit觸發(fā)父組件事件修改數(shù)據(jù),關(guān)閉彈窗Vue中在子組件往父組件傳參,很多都是通過$emit來觸發(fā)父組件的事件來修改數(shù)據(jù)。
在子組件中,在點(diǎn)擊關(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)閉彈窗 }, }
可以用彈窗組件實(shí)現(xiàn)下列這種信息展示,或者事件交互:
彈窗組件代碼上面是把彈窗的每個步驟拆分開來,一步步解析的,每一步都說的比較清楚了,具體連起來的話,可以看看代碼,再結(jié)合文章就能理的很清楚了。
小結(jié):這個彈窗組件,實(shí)現(xiàn)起來一點(diǎn)都不難,我這里主要是提供了一個實(shí)現(xiàn)方式,當(dāng)項(xiàng)目中有需要的話,大家也可以自己擼一個出來,以上就是本文的內(nèi)容了,希望同學(xué)們看完能有所收獲。
希望看完的朋友可以點(diǎn)個喜歡,也可以關(guān)注一下我,您的支持是對我最大的鼓勵。
最后:如需轉(zhuǎn)載,請放上原文鏈接并署名。碼字不易,感謝支持!本人寫文章本著交流記錄的心態(tài),寫的不好之處,不撕逼,但是歡迎指點(diǎn)。
個人blog and 掘金個人主頁
以上2018.4.21
參考資料:Vue文檔-插槽
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/113123.html
摘要:前言最近在使用框架,用到了對話框組件,大致實(shí)現(xiàn)的效果,跟我之前自己在移動端項(xiàng)目里面弄的一個彈窗組件差不太多。現(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了,還差一個彈窗的關(guān)閉事件,這里就涉及到子組件往父組件傳參了。 前言 最近在使用element-ui框架,用到了Dialog對話框組件,大致實(shí)現(xiàn)的效果,跟我之前自己在移動端項(xiàng)目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實(shí)現(xiàn)方式與大家...
摘要:前言最近在使用框架,用到了對話框組件,大致實(shí)現(xiàn)的效果,跟我之前自己在移動端項(xiàng)目里面弄的一個彈窗組件差不太多。現(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了,還差一個彈窗的關(guān)閉事件,這里就涉及到子組件往父組件傳參了。 前言 最近在使用element-ui框架,用到了Dialog對話框組件,大致實(shí)現(xiàn)的效果,跟我之前自己在移動端項(xiàng)目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實(shí)現(xiàn)方式與大家...
摘要:在組件內(nèi),我們觸及不到組件的模板,所以簡單的在動態(tài)模板上添加并不能完成事件監(jiān)聽。簡單來說,依賴收集是在渲染函數(shù)渲染的函數(shù)中進(jìn)行的,在中一旦通過使用了這個變量,通過這個變量的就收集到了正在執(zhí)行的渲染函數(shù)這一個依賴。 作為一個中后臺表單&表格工程師,經(jīng)常需要在一個頁面中處理多個彈窗。我自己的項(xiàng)目中,一個復(fù)雜的審核頁面中的彈窗數(shù)量超過了30個,如何管理大量的彈窗就成為了一個需要考慮的問題。 ...
摘要:基于開發(fā)的插件包含仿照原生樣式來源一些想法剛開始的時候想要用現(xiàn)成的彈窗組件來著但是查找一圈沒有發(fā)現(xiàn)比較合適項(xiàng)目的所以才自己開發(fā)了一個包含四種并且可以單個引入的組件開發(fā)實(shí)際上比較簡單有興趣的可以看下源碼實(shí)現(xiàn)步驟很清晰關(guān)于樣式的問題是直接從魅 wc-messagebox 基于 vue 2.0 開發(fā)的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...
摘要:仿滴滴出行項(xiàng)目最近,各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目,趁著這股熱潮我也用擼了一個滴滴出行的項(xiàng)目。可是,后來在手機(jī)上發(fā)現(xiàn),輸入的時候居然調(diào)不出軟鍵盤,寫項(xiàng)目的時候沒考慮到設(shè)備問題,簡直是大大的失誤。也就是說可以在組件內(nèi)部進(jìn)行請求,不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近,各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目,趁著這股熱潮我也用vue擼了一個滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...
閱讀 2804·2023-04-25 18:46
閱讀 695·2021-11-19 09:40
閱讀 2062·2021-09-28 09:36
閱讀 3374·2021-09-10 11:11
閱讀 3453·2019-08-30 15:55
閱讀 1791·2019-08-30 15:54
閱讀 2589·2019-08-29 16:16
閱讀 3536·2019-08-29 15:08