介绍
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}