#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()