react-mobile-layer

React mobile dialog components

Usage no npm install needed!

<script type="module">
  import reactMobileLayer from 'https://cdn.skypack.dev/react-mobile-layer';
</script>

README

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