仿 taro-ui 實(shí)現(xiàn) modal 組件小程序組件

qpal 發(fā)布于2019-08-23 16:53 / 1465人閱讀

摘要：其他的項(xiàng)目使用了拼裝樣式驗(yàn)證傳入的屬性是否是函數(shù)驗(yàn)證父組件傳入的數(shù)據(jù)格式是否正確五參考文獻(xiàn)談?wù)劦氖褂檬褂脠?chǎng)景

仿 taro-ui 實(shí)現(xiàn) modal 組件小程序組件.

簡(jiǎn)介:

項(xiàng)目中使用到彈窗類(lèi)的組件,重新制造了一個(gè)輪子.

源碼地址: https://github.com/xiangxiong...

編寫(xiě)完modal組件總計(jì)花了28分鐘.

效果圖:

編寫(xiě)組件的基本思路:

1、分析組件要實(shí)現(xiàn)的基本功能.對(duì)組件進(jìn)行拆分.確定實(shí)現(xiàn)功能的先后順序.

2、確定使用方法, 在做之前應(yīng)該想好輸入和輸出. 確定好數(shù)據(jù)結(jié)構(gòu).

3、先寫(xiě)基本結(jié)構(gòu), 后寫(xiě)樣式, 在追加事件和交互, 細(xì)節(jié)優(yōu)化.

4、技術(shù)總結(jié).

一、 組件拆分

該組件可以分為三個(gè)部分.

1、遮罩層,點(diǎn)擊遮罩層可以關(guān)閉彈窗.

2、標(biāo)題，內(nèi)容，操作. 這些功能多是可以動(dòng)態(tài)配置的.

3、點(diǎn)擊取消關(guān)閉彈窗,點(diǎn)擊確認(rèn)可以給父頁(yè)面?zhèn)髦?

二、確定使用方法

modal 參數(shù):

參數(shù)	說(shuō)明	類(lèi)型
title	元素的標(biāo)題	String
content	元素的內(nèi)容	String
cancelText	取消按鈕的文本	String
closeOnClickOverlay	點(diǎn)擊浮層的時(shí)候時(shí)候自動(dòng)關(guān)閉	Boolean
confirmText	確認(rèn)按鈕的文本	String
isOpened	是否顯示模態(tài)框	Boolean

modal 事件:

事件名稱 | 說(shuō)明

onClose	觸發(fā)關(guān)閉時(shí)的事件
onCancel	點(diǎn)擊取消按鈕觸發(fā)的樣式
onConfirm	點(diǎn)擊確認(rèn)按鈕觸發(fā)的事件

數(shù)據(jù)結(jié)構(gòu)

  this.state = {
      modal:{
          isOpened:false,
          title:"標(biāo)題",
          content:"內(nèi)容",
          cancelText:"取消",
          confirmText:"確認(rèn)",
          closeOnClickOverlay:false
      }
  }

三、分步驟實(shí)施

實(shí)現(xiàn) UI 功能.

實(shí)現(xiàn)modal 的結(jié)構(gòu)

mp-modal mp-modal--active 控制這個(gè)modal 是否顯示隱藏。

mp-modal__overlay 通用的遮罩層.

mp-modal__container modal 顯示區(qū)域.

mp-modal__title,mp-modal__content,mp-modal__footer 分別為標(biāo)題，內(nèi)容，事件觸發(fā).

 
         
        
              標(biāo)題
              內(nèi)容

* 實(shí)現(xiàn)modal 的 css 樣式.(說(shuō)重要的幾個(gè)點(diǎn))
    * 通用的遮罩層.
    ```
    {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba($color: #000, $alpha: 0.3);
    }
    ```
    * modal 居中定位
    ```
    {
        position: $pos;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    ```
* 這兩部分可以做成公共的css 給整個(gè)項(xiàng)目提供使用.

react 部分功能實(shí)現(xiàn).

核心點(diǎn)有2個(gè):

1、在子組件生命周期 componentWillReceiveProps 中監(jiān)聽(tīng)父組件狀態(tài)的變化決定是否渲染子組件.

componentWillReceiveProps(nextProps){
    const {_isOpened} = this.state;

    if(_isOpened != nextProps.isOpened){
    this.setState({
        _isOpened:nextProps.isOpened
    });
    }
}

    * 2、子組件接收父組件傳遞過(guò)來(lái)的屬性和事件.


* 組件的代碼:

```
    
```

四、技術(shù)總結(jié):

1、掌握sass 的寫(xiě)法,css 3 掌握的基礎(chǔ)知識(shí), css 偽類(lèi) :after ,:before , 選擇器 :not(:first-child) :last-child, transition 動(dòng)畫(huà), flex 布局, transform 選擇. 掌握這些知識(shí)之后輕松可以寫(xiě)出UI.

2、掌握react 父子之間數(shù)據(jù)的傳遞.

3、掌握 componentWillReceiveProps 這個(gè)生命周期函數(shù)的用法。

4、其他的項(xiàng)目使用了 classnames 拼裝樣式, lodash 驗(yàn)證傳入的屬性是否是函數(shù), PropTypes 驗(yàn)證父組件傳入的數(shù)據(jù)格式是否正確.

五、參考文獻(xiàn):

談?wù)凴eact--componentWillReceiveProps的使用.

css before 使用場(chǎng)景.

云服務(wù)器 GPU云服務(wù)器小程序組件開(kāi)發(fā) 微信小程序組件仿朋友圈小程序小程序如何實(shí)現(xiàn)

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

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

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

登陸后可評(píng)論

0條評(píng)論

qpal

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2938·2023-04-26 02:22
Java的環(huán)境搭建

閱讀 2292·2021-11-17 09:33
高防主機(jī)是什么-什么是高防服務(wù)器？

閱讀 3144·2021-09-22 16:06
服務(wù)器怎么做虛擬主機(jī)-我想在服務(wù)器建立虛擬主機(jī)，該怎么做？

閱讀 1078·2021-09-22 15:54
面試記錄2

閱讀 3541·2019-08-29 13:44
css邊框與背景

閱讀 1921·2019-08-29 12:37
大規(guī)模應(yīng)用TypeScript「2019 JSConf -Brie Bunge」

閱讀 1327·2019-08-26 14:04
【build your own xxx】實(shí)現(xiàn)你自己的call和apply

閱讀 1920·2019-08-26 11:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

仿 taro-ui 實(shí)現(xiàn) modal 組件小程序組件

相關(guān)文章