react提示框几秒_React.js仿layer弹窗|react自定义全局对话框RLayer

介绍

rlayer 一款基于react.js构建的pc网页端全局弹窗组件。支持顺滑拖拽、缩放、全屏及最大化效果。拥有精美UI及极简API调用。

内置30+参数配置、10+弹框类型、7+动画效果

支持 Alert、Dialog、Message、Notification、ActionSheet、Toast、Popover 等多样化弹窗类型。

RLayer设计开发灵感来自之前的VLayer自定义弹框组件。

引入组件

在需要用到弹窗功能的页面引入即可。

// 引入RLayer

import rlayer from './components/rlayer';

通过rlayer({})即可快速调用一个弹窗实例。

showConfirm = () => {

let $rlayer = rlayer({

title: '标题信息',

content: "

显示弹窗内容。

",

shadeClose: true,

zIndex: 1000,

lockScroll: true,

resize: true,

dragOut: false,

btns: [

{

text: '取消',

click: () => {

$rlayer.close()

}

},

{

text: '确定',

style: {color: '#005eff'},

click: () => {

// ...

}

}

]

})

}

参数配置

rlayer.js支持30+参数自定义配置。任意搭配实现需要的效果。

/**

* 弹出框参数配置

*/

static defaultProps = {

// 参数

id: '', // {string} 控制弹层唯一标识，相同id共享一个实例

title: '', // {string} 标题

content: '', // {string|element} 内容(支持字符串或组件)

type: '', // {string} 弹框类型(toast|footer|actionsheet|actionsheetPicker|android|ios|contextmenu|drawer|iframe)

layerStyle: '', // {object} 自定义弹框样式

icon: '', // {string} Toast图标(loading|success|fail)

shade: true, // {bool} 是否显示遮罩层

shadeClose: true, // {bool} 是否点击遮罩层关闭弹框

lockScroll: true, // {bool} 是否弹框显示时将body滚动锁定

opacity: '', // {number|string} 遮罩层透明度

xclose: true, // {bool} 是否显示关闭图标

xposition: 'right', // {string} 关闭图标位置(top|right|bottom|left)

xcolor: '#333', // {string} 关闭图标颜色

anim: 'scaleIn', // {string} 弹框动画(scaleIn|fadeIn|footer|fadeInUp|fadeInDown|fadeInLeft|fadeInRight)

position: 'auto', // {string|array}