I think that every component should have its own style and attribute event callback configuration. So I will give x-dialog a simple default style and various default configuration items. All react plug-in examples will be included in react China.
Demo address: x-dialog various case demonstrations
Source file address:
Use npm to install, run
$ 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 type控制弹窗的显示隐藏的.
title:string type为空时，不显示标题.
className:string type弹窗的样式类
timer:number type定时关闭，可不传。
width:number type弹窗宽度，不足时，内容区域出现上下滚动
height:number type弹窗宽度，不足时，内容区域出现上下滚动
buttons:node type自定义操作区域的按钮,为false类型时不显示操作区域，不传时默认显示 `确定、取消`
okCallback :func type当默认按钮的情况下时，点击`确定`时的回调方法，点`取消`时直接隐藏，如果需要定制更多的方法，建议传递`buttons`属性。
afterShow:func type显示的回调方法
afterHide:func type关闭隐藏时的回调方法
Attachment: react.js download address
The above is the detailed content of Introduction to x-dailog pop-up window floating layer component. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
