Développement du plug-in React.js, composant de couche flottante pop-up x-dailog

Je pense que chaque composant devrait avoir son propre style et sa propre configuration de rappel d'événement d'attribut. Je vais donc donner à x-dialog un style par défaut simple et divers éléments de configuration par défaut. Tous les exemples de plug-ins React seront inclus dans React China.

Adresse de démonstration : x-dialog diverses démonstrations de cas

Adresse du fichier source :

installation npm

Utilisez npm pour installer, exécuter

$ npm install x-dialog --save-dev

Méthode d'appel

<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(&#39;我显示出来了&#39;)
      afterHide:()=>alert(&#39;我又隐藏了&#39;)>
    <div>这里是弹窗的内容区域</div>
</Dialog>

Méthode d'attribut

isShow : type booléen

控制弹窗的显示隐藏的.

title : type de chaîne

为空时，不显示标题.

className:type de chaîne

弹窗的样式类

timer: type de numéro

定时关闭，可不传。

width:type de numéro

弹窗宽度，不足时，内容区域出现上下滚动

height:type de numéro

弹窗宽度，不足时，内容区域出现上下滚动

buttons : type de nœud

自定义操作区域的按钮,为false类型时不显示操作区域，不传时默认显示 `确定、取消`

okCallback : type de fonction

当默认按钮的情况下时，点击`确定`时的回调方法，点`取消`时直接隐藏，如果需要定制更多的方法，建议传递`buttons`属性。

afterShow:type de fonction

显示的回调方法

afterHide:type de fonction

关闭隐藏时的回调方法

Pièce jointe : adresse de téléchargement de React.js