国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

論如何用Vue實(shí)現(xiàn)一個(gè)彈窗-一個(gè)簡(jiǎn)單的組件實(shí)現(xiàn)

Luosunce / 2870人閱讀

摘要：前言最近在使用框架，用到了對(duì)話框組件，大致實(shí)現(xiàn)的效果，跟我之前自己在移動(dòng)端項(xiàng)目里面弄的一個(gè)彈窗組件差不太多?，F(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了，還差一個(gè)彈窗的關(guān)閉事件，這里就涉及到子組件往父組件傳參了。

前言

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

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

個(gè)人博客了解一下：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)閉時(shí)通過事件$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)去的東西，如果看不懂的話可以先跳過，

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

---

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

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

單個(gè)插槽： 
    這是在沒有slot傳進(jìn)來的時(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)容

在父組件中的使用方式：

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

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

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

        

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

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

---

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

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

因?yàn)閺棿敖M件都是引到別的組件里面去用的，為了適合不同組件場(chǎng)景中的彈窗，所以彈窗組件必須具備一定的可定制性，否則這樣的組件將毫無意義,下面介紹一下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í)候就需要通過$emit來修改父組件的數(shù)據(jù)，然后數(shù)據(jù)會(huì)自動(dòng)傳到子組件中。

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

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

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

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

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

父組件中的寫法：

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

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

彈窗組件代碼

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

小結(jié)：

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

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

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

個(gè)人blog and 掘金個(gè)人主頁(yè)

以上2018.4.21

參考資料：

Vue文檔-插槽

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52227.html

相關(guān)文章

  • 論如何用Vue實(shí)現(xiàn)一個(gè)彈窗-一個(gè)簡(jiǎn)單的組件實(shí)現(xiàn)

    摘要：前言最近在使用框架，用到了對(duì)話框組件，大致實(shí)現(xiàn)的效果，跟我之前自己在移動(dòng)端項(xiàng)目里面弄的一個(gè)彈窗組件差不太多。現(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了，還差一個(gè)彈窗的關(guān)閉事件，這里就涉及到子組件往父組件傳參了。 前言 最近在使用element-ui框架，用到了Dialog對(duì)話框組件，大致實(shí)現(xiàn)的效果，跟我之前自己在移動(dòng)端項(xiàng)目里面弄的一個(gè)彈窗組件差不太多。然后就想著把這種彈窗組件的實(shí)現(xiàn)方式與大家...

    xialong 評(píng)論0 收藏0

  • 論如何用Vue實(shí)現(xiàn)一個(gè)彈窗-一個(gè)簡(jiǎn)單的組件實(shí)現(xiàn)

    摘要：前言最近在使用框架，用到了對(duì)話框組件，大致實(shí)現(xiàn)的效果，跟我之前自己在移動(dòng)端項(xiàng)目里面弄的一個(gè)彈窗組件差不太多。現(xiàn)在基本上彈窗組件都已實(shí)現(xiàn)的差不多了，還差一個(gè)彈窗的關(guān)閉事件，這里就涉及到子組件往父組件傳參了。 前言 最近在使用element-ui框架，用到了Dialog對(duì)話框組件，大致實(shí)現(xiàn)的效果，跟我之前自己在移動(dòng)端項(xiàng)目里面弄的一個(gè)彈窗組件差不太多。然后就想著把這種彈窗組件的實(shí)現(xiàn)方式與大家...

    snowLu 評(píng)論0 收藏0

  • 從Dialog管理談到Vue渲染原理

    摘要：在組件內(nèi)，我們觸及不到組件的模板，所以簡(jiǎn)單的在動(dòng)態(tài)模板上添加并不能完成事件監(jiān)聽。簡(jiǎn)單來說，依賴收集是在渲染函數(shù)渲染的函數(shù)中進(jìn)行的，在中一旦通過使用了這個(gè)變量，通過這個(gè)變量的就收集到了正在執(zhí)行的渲染函數(shù)這一個(gè)依賴。 作為一個(gè)中后臺(tái)表單&表格工程師，經(jīng)常需要在一個(gè)頁(yè)面中處理多個(gè)彈窗。我自己的項(xiàng)目中，一個(gè)復(fù)雜的審核頁(yè)面中的彈窗數(shù)量超過了30個(gè)，如何管理大量的彈窗就成為了一個(gè)需要考慮的問題。 ...

    darkbug 評(píng)論0 收藏0

  • 基于 Vue 2.0 實(shí)現(xiàn)的移動(dòng)端彈窗 (Alert, Confirm, Toast)組件.

    摘要：基于開發(fā)的插件包含仿照原生樣式來源一些想法剛開始的時(shí)候想要用現(xiàn)成的彈窗組件來著但是查找一圈沒有發(fā)現(xiàn)比較合適項(xiàng)目的所以才自己開發(fā)了一個(gè)包含四種并且可以單個(gè)引入的組件開發(fā)實(shí)際上比較簡(jiǎn)單有興趣的可以看下源碼實(shí)現(xiàn)步驟很清晰關(guān)于樣式的問題是直接從魅 wc-messagebox 基于 vue 2.0 開發(fā)的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

    Darkgel 評(píng)論0 收藏0

  • Vue2.0 仿滴滴出行項(xiàng)目

    摘要：仿滴滴出行項(xiàng)目最近，各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目，趁著這股熱潮我也用擼了一個(gè)滴滴出行的項(xiàng)目。可是，后來在手機(jī)上發(fā)現(xiàn)，輸入的時(shí)候居然調(diào)不出軟鍵盤，寫項(xiàng)目的時(shí)候沒考慮到設(shè)備問題，簡(jiǎn)直是大大的失誤。也就是說可以在組件內(nèi)部進(jìn)行請(qǐng)求，不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目，趁著這股熱潮我也用vue擼了一個(gè)滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...

    ShevaKuilin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<