0.0.5 • Published 8 years ago
react-mobile-layer v0.0.5
#react-mobile-layer
React 手机端弹框组件
#下载
npm install --save react-moblie-layer
#例子
示例一:
import React from 'react';
import {render} from 'react-dom';
import Layer from 'react-mobile-layer';
var LayerExample = React.createClass({
getInitialState: function () {
return {
content:"You can pass in a react components",
layerParam:{
show:true,
btn:"I know"
},
type:'alert'
}
},
render:function(){
return (
<div>
<Layer type={this.state.type} param={this.state.param}>{this.state.content}</Layer>
</div>
)
}
});
render(<LayerExample/>, document.getElementById('dialog'));
示例二:
import React from 'react';
import {render} from 'react-dom';
import Layer from 'react-mobile-layer';
var LayerExample = React.createClass({
showAlert: function () {
this.refs.layer.alert({
content:"You can pass in a react components",
btn:"I know",
ok:function(){
console.log("You click on the confirm button")
}
})
},
render:function(){
return (
<div>
<button onClick={this.showAlert}></button>
<Layer ref='layer'/>
</div>
)
}
});
#属性
- content string 内容支持传入一个react组件
- btn string|array 按钮显示文本的配置, 如果为字符串则设置确定按钮的文本,如果数组(确定,取消)设置确定按钮和取消按钮文本
- ok function 确定事件回调
- cancel function 取消事件回调
- close function 自动关闭事件回调
- time number 对话框显示时间,超过时间(单位:秒)将自动关闭,默认2秒
- anim string 页面层进入页面方向,有值: up, bottom, left and right
- style object 自定义风格配置
- show Boolean 是否显示,默认是展示的
##方法
####alert (object)
/**
* Can receive parameters
* @ param {object}
* content
* btn
* ok
* */
example:
this.refs.layer.alert({
content: "你可以传入一个react组件",
btn: "ok",
ok: function () {}
})
####page (object)
/**
* Can receive parameters
* @ param {object}
* content
* anim
* style
* */
example:
this.refs.layer.page({
content: "你可以传入一个react组件",
anim: "up",
style: {height: "300px"}
})
####tips (object)
/**
* Can receive parameters
* @ param {object}
* content
* time (Unit s,The default for 2 seconds)
* close
* */
example:
this.refs.layer.tips({
content: "You can pass in a react components",
time: 4,
close: function () {}
})
####confirm (object)
/**
* Can receive parameters
* @ param {object}
* content
* btn
* ok
* cancel
* */
example:
this.refs.layer.confirm({
content: "You can pass in a react components",
btn:["ok",'cancel'],
ok: function () {}
cancel:function () {}
})
####bottomConfirm (object)
/**
* Can receive parameters
* @ param {object}
* content
* btn
* ok
* cancel
* */
example:
this.refs.layer.bottomConfirm({
content: "You can pass in a react components",
btn:["ok",'cancel'],
ok: function () {}
cancel:function () {}
})
####loading (string)
/**
* Can receive parameters
* @ param content
* */
example:
this.refs.layer.loading()
or
this.refs.layer.loading('Waiting...¡¯)
####close
Close the layer
example:
this.refs.layer.close()