仿 taro-ui 實現 modal 組件小程序組件

時間 2019-11-10

標籤 taro 實現 modal 組件程序简体版

原文原文鏈接

仿 taro-ui 實現 modal 組件小程序組件.

簡介:css
- 項目中使用到彈窗類的組件,從新制造了一個輪子.
- 源碼地址: https://github.com/xiangxiong...
- 編寫完modal組件總計花了28分鐘.
效果圖:react
編寫組件的基本思路:git
- 一、分析組件要實現的基本功能.對組件進行拆分.肯定實現功能的前後順序.
- 二、肯定使用方法, 在作以前應該想好輸入和輸出. 肯定好數據結構.
- 三、先寫基本結構, 後寫樣式, 在追加事件和交互, 細節優化.
- 四、技術總結.

1、組件拆分

該組件能夠分爲三個部分.github
- 一、遮罩層,點擊遮罩層能夠關閉彈窗.
- 二、標題，內容，操做. 這些功能可能是能夠動態配置的.
- 三、點擊取消關閉彈窗,點擊確承認以給父頁面傳值.

2、肯定使用方法

modal 參數:web

參數	說明	類型
title	元素的標題	String
content	元素的內容	String
cancelText	取消按鈕的文本	String
closeOnClickOverlay	點擊浮層的時候時候自動關閉	Boolean
confirmText	確認按鈕的文本	String
isOpened	是否顯示模態框	Boolean

modal 事件:小程序

事件名稱 | 說明

onClose	觸發關閉時的事件
onCancel	點擊取消按鈕觸發的樣式
onConfirm	點擊確認按鈕觸發的事件

數據結構sass

this.state = {
      modal:{
          isOpened:false,
          title:'標題',
          content:'內容',
          cancelText:'取消',
          confirmText:'確認',
          closeOnClickOverlay:false
      }
  }

3、分步驟實施

實現 UI 功能.數據結構
- 實現modal 的結構app
  - mp-modal mp-modal--active 控制這個modal 是否顯示隱藏。
  - mp-modal__overlay 通用的遮罩層.
  - mp-modal__container modal 顯示區域.
  - mp-modal__title,mp-modal__content,mp-modal__footer 分別爲標題，內容，事件觸發.

<View className='mp-modal mp-modal--active'>
        <View className="mp-modal__overlay"> </View>
        <View className="mp-modal__container">
              <View className="mp-modal__title">標題</View>
              <View className="mp-modal__content">內容</View>
              <View  className="mp-modal__footer">
                            <View className="mp-modal__action">
                               <Button>取消</Button>
                               <Button>確認</Button> 
                            </View>
              </View>
        </View>
  </View>

實現modal 的 css 樣式.(說重要的幾個點)webapp

通用的遮罩層.

{
    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 給整個項目提供使用.

react 部分功能實現.

核心點有2個:

* 一、在子組件生命週期 componentWillReceiveProps 中監聽父組件狀態的變化決定是否渲染子組件.

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

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

二、子組件接收父組件傳遞過來的屬性和事件.
- 組件的代碼:

```
    <Modal
    title={this.modal.title} 
    content={this.modal.content} 
    isOpened={this.modal.isOpened}
    cancelText={this.modal.cancelText}
    confirmText={this.modal.confirmText}
    closeOnClickOverlay={this.modal.closeOnClickOverlay}
    onClose={this.onClose}
    onConfirm={this.onConfirm}
    onCancel={this.onCancel}
    />
```

4、技術總結:

一、掌握sass 的寫法,css 3 掌握的基礎知識, css 僞類 :after ,:before , 選擇器 :not(:first-child) :last-child, transition 動畫, flex 佈局, transform 選擇. 掌握這些知識以後輕鬆能夠寫出UI.
二、掌握react 父子之間數據的傳遞.
三、掌握 componentWillReceiveProps 這個生命週期函數的用法。
四、其餘的項目使用了 classnames 拼裝樣式, lodash 驗證傳入的屬性是不是函數, PropTypes 驗證父組件傳入的數據格式是否正確.