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