眾所周知，產品經理有三寶：彈窗、浮層和引導。身為乙個程式設計師，尤其是前端工程師不得不面向產品程式設計，由於原型圖上滿滿的彈窗，逼迫我們不得不封裝乙個彈窗元件來應付產品的需求
1、通過傳入乙個visible來控制彈框的顯示與隱藏，資料型別為boolean
2、通過傳入乙個title來設定彈框的標題，資料型別為string
3、通過傳入乙個onok函式來設定彈框確認按鈕的操作，資料型別為function
4、通過傳入乙個oncancel函式來設定彈框關閉取消按鈕的操作，資料型別為function
5、通過傳入乙個children來設定彈框主體內容，資料型別為element
import react, from
'react'
import button from
'../button/button'
import proptypes from
'prop-types'
import
'./gymodal.less'
export
default
class
gymodal
extends
component
static defaultprops = ,
oncancel: () => {}
} render () = this.props,
show = ,
hide = ,
contshow = ,
conthide =
return (
classname="gy-modalcontainer"
style=>
classname="mask"
onclick=>
div>
classname="innercontent"
style=>
classname="innercontent-header">
classname="innercontent-title">div>
div>
classname="innercontent-center">
div>
classname="innercontent-footer">
type='cancel'
onclick=>取消button>
type='primary'
onclick=>確定button>
div>
div>
div>
)}}複製**
注意：這裡在開啟和關閉彈框時，增加了css3動畫過濾效果。一開始為了實現動畫過渡效果，我首先想到的是通過改變display: none到display: block，並且設定transition: all .3s ease來實現過濾動畫效果，後來發現根本沒有效果，原因是transition是不支援display屬性的過渡的，當然你可以通過js的settimeout來實現，這邊就直接用css3來實現動畫過渡效果了。modal元件最外層容器通過改變z-index和opacity來實現過渡動畫效果，而modal元件的彈框內容部分主要是通過改變彈框的width和height來實現過渡動畫效果的，這兩個部分的動畫效果都是由visible來控制的。
.gy-modalcontainer
.innercontent
}.innercontent-center
.innercontent-footer
}}複製**
以下是render函式中的**
以下是展示效果
Django 手把手帶你入門
一 開發環境 python 2.7 pycharm 4 二 django的安裝 開啟pycharm 新建專案 看圖操作 自動安裝django環境 三 建立第乙個 1.開啟views.py 匯入 編寫乙個index函式 先寫成硬編碼的形式 2.開啟urls.py 匯入上圖編寫的函式 在urlpatte...
手把手帶你構建SpringBoot專案
springboot引言 spring boot是由pivotal團隊提供的全新框架，其設計目的是用來簡化新spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員不再需要定義樣板化的配置。總要求 約定 配置 編碼 構建專案 1 建立springboot專案 註解總結...
Windows服務 手把手帶你體驗
microsoft windows 服務 即，以前的 nt 服務 使您能夠建立在它們自己的 windows 會話中可長時間執行的可執行應用程式。這些服務可以在計算機啟動時自動啟動，可以暫停和重新啟動而且不顯示任何使用者介面。這使服務非常適合在伺服器上使用，或任何時候，為了不影響在同一臺計算機上工作的...