react.js 플러그인 개발, x-dailog 팝업 플로팅 레이어 컴포넌트

모든 컴포넌트에는 고유한 스타일과 속성 이벤트 콜백 구성이 있어야 한다고 생각합니다. 그래서 x-dialog에 간단한 기본 스타일과 다양한 기본 구성 항목을 제공하겠습니다. 모든 React 플러그인 예제는 React China에 포함됩니다.

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

로그인 후 복사

속성 메서드

`isShow` :bool type`isShow` :bool类型

控制弹窗的显示隐藏的.

로그인 후 복사

`title`:string类型

为空时，不显示标题.

로그인 후 복사

`className`:string类型

弹窗的样式类

로그인 후 복사

`timer`:number类型

定时关闭，可不传。

로그인 후 복사

`width`:number类型

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

로그인 후 복사

`height`:number类型

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

로그인 후 복사

`buttons`:node类型

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

로그인 후 복사

`okCallback`:func类型

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

로그인 후 복사

`afterShow`:func类型

显示的回调方法

로그인 후 복사

`afterHide`

关闭隐藏时的回调方法

로그인 후 복사

제목:문자열 유형

rrreee🎜🎜 🎜🎜className:문자열 유형🎜🎜rrreee🎜 🎜 🎜🎜타이머:숫자 유형🎜🎜rrreee🎜🎜 🎜🎜너비:숫자 유형🎜🎜rrreee🎜🎜🎜🎜높이:숫자 유형 🎜🎜rrreee🎜🎜 🎜🎜버튼: 노드 유형 🎜🎜rrreee🎜🎜 🎜🎜okCallback: func 유형 🎜🎜rrreee🎜🎜 🎜🎜afterShow:func type🎜🎜rrreee🎜🎜🎜🎜afterHide:func type🎜🎜rrreee🎜🎜첨부: React.js 다운로드 주소🎜