react.js插件開發,x-dailog彈窗浮層組件

我認為，每一個組件都應該有他自帶的樣式和屬性事件回調配置。所以我會給x-dialog默認一套簡單的樣式，和各種默認的配置項。所有react插件示例都會收錄在react中國上。

演示地址： x-dialog各種案例演示

源文件地址：https://github.com/react-plugin/x-dialog

npm安裝

使用 npm 安裝, 運行

$ npm install x-dialog --save-dev

調用方式

<Dialog 
      isShow: true
      title: "這是一個例子"
      className:"myClass"
      timer:2000
      width:300
      height:300
      buttons: <div><button className="d-ok" onClick={this.hide.bind(this)}>我知道了</button><button className="d-cancel" onClick={this.hide.bind(this)}>關閉</button></div>
      afterShow:()=>alert('我顯示出來了')
      afterHide:()=>alert('我又隱藏了')
        >
    <div>這里是彈窗的內容區域</div>
</Dialog>

 

屬性方法

isShow :bool類型

控制彈窗的顯示隱藏的.

title:string類型

為空時，不顯示標題.

 

className:string類型

彈窗的樣式類

 

timer:number類型

定時關閉，可不傳。

 

width:number類型

彈窗寬度，不足時，內容區域出現上下滾動

 

height:number類型

彈窗寬度，不足時，內容區域出現上下滾動

 

buttons:node類型

自定義操作區域的按鈕,為false類型時不顯示操作區域，不傳時默認顯示 `確定、取消`

 

okCallback:func類型

當默認按鈕的情況下時，點擊`確定`時的回調方法，點`取消`時直接隱藏，如果需要定制更多的方法，建議傳遞`buttons`屬性。

 

afterShow:func類型

顯示的回調方法

 

afterHide:func類型

關閉隱藏時的回調方法

附：react.js下載地址