資訊專欄INFORMATION COLUMN
摘要：其他的項目使用了拼裝樣式驗證傳入的屬性是否是函數驗證父組件傳入的數據格式是否正確五參考文獻談談的使用使用場景
仿 taro-ui 實現 modal 組件 小程序組件.
簡介:
項目中使用到彈窗類的組件,重新制造了一個輪子.
源碼地址: https://github.com/xiangxiong...
編寫完modal組件總計花了28分鐘.
效果圖:
編寫組件的基本思路:
1、分析組件要實現的基本功能.對組件進行拆分.確定實現功能的先后順序.
2、確定使用方法, 在做之前應該想好輸入和輸出. 確定好數據結構.
3、先寫基本結構, 后寫樣式, 在追加事件和交互, 細節優化.
4、技術總結.
一、 組件拆分
該組件可以分為三個部分.
1、遮罩層,點擊遮罩層可以關閉彈窗.
2、標題，內容，操作. 這些功能多是可以動態配置的.
3、點擊取消關閉彈窗,點擊確認可以給父頁面傳值.
二、確定使用方法
modal 參數:
| 參數 | 說明 | 類型 |
|---|---|---|
| title | 元素的標題 | String |
| content | 元素的內容 | String |
| cancelText | 取消按鈕的文本 | String |
| closeOnClickOverlay | 點擊浮層的時候時候自動關閉 | Boolean |
| confirmText | 確認按鈕的文本 | String |
| isOpened | 是否顯示模態框 | Boolean |
modal 事件:
事件名稱 | 說明
| onClose | 觸發關閉時的事件 |
| onCancel | 點擊取消按鈕觸發的樣式 |
| onConfirm | 點擊確認按鈕觸發的事件 |
數據結構
this.state = {
modal:{
isOpened:false,
title:"標題",
content:"內容",
cancelText:"取消",
confirmText:"確認",
closeOnClickOverlay:false
}
}
三、分步驟實施
實現 UI 功能.
實現modal 的結構
mp-modal mp-modal--active 控制這個modal 是否顯示隱藏。
mp-modal__overlay 通用的遮罩層.
mp-modal__container modal 顯示區域.
mp-modal__title,mp-modal__content,mp-modal__footer 分別為 標題，內容，事件觸發.
標題 內容
實現modal 的 css 樣式.(說重要的幾個點)
通用的遮罩層.
{
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個:
* 1、在子組件生命周期 componentWillReceiveProps 中監聽父組件狀態的變化決定是否渲染子組件.
componentWillReceiveProps(nextProps){
const {_isOpened} = this.state;
if(_isOpened != nextProps.isOpened){
this.setState({
_isOpened:nextProps.isOpened
});
}
}
2、子組件接收父組件傳遞過來的屬性和事件.
組件的代碼:
```
四、技術總結:
1、掌握sass 的寫法,css 3 掌握的基礎知識, css 偽類 :after ,:before , 選擇器 :not(:first-child) :last-child, transition 動畫, flex 布局, transform 選擇. 掌握這些知識之后輕松可以寫出UI.
2、掌握react 父子之間數據的傳遞.
3、掌握 componentWillReceiveProps 這個生命周期函數的用法。
4、其他的項目使用了 classnames 拼裝樣式, lodash 驗證傳入的屬性是否是函數, PropTypes 驗證父組件傳入的數據格式是否正確.
五、參考文獻:
談談React--componentWillReceiveProps的使用.
css before 使用場景.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103459.html
摘要：其他的項目使用了拼裝樣式驗證傳入的屬性是否是函數驗證父組件傳入的數據格式是否正確五參考文獻談談的使用使用場景 仿 taro-ui 實現 modal 組件 小程序組件. 簡介: 項目中使用到彈窗類的組件,重新制造了一個輪子. 源碼地址: https://github.com/xiangxiong... 編寫完modal組件總計花了28分鐘. 效果圖: showImg(htt...
摘要：多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...
本文收集學習過程中使用到的資源。 持續更新中…… 項目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端 微信公眾號 小程序 webpack GraphQL 性能與監控 高質文章 趨勢 動效 數據結構與算法 js core 代碼規范...
閱讀 1376·2021-10-14 09:43
閱讀 4209·2021-09-27 13:57
閱讀 4552·2021-09-22 15:54
閱讀 2549·2021-09-22 10:54
閱讀 2350·2021-09-22 10:02
閱讀 2108·2021-08-27 13:11
閱讀 867·2019-08-29 18:44
閱讀 1639·2019-08-29 15:20
