js弹出框自定义（js实现弹出框的插件）
-
-
类目：知识大全
-
联系人：
-
微信号：
-
Q Q 号：
-
手机号：
-
浏览量：
325
【商户信息】
【货源详情】
今天，我要和朋友们分享一下新开发的React自定义对话框中最近的RLayer。
基于33558www.Sina.com/react.js开发的PC桌面端交互式弹出组件。 融合了诊断、消息、通知、操作表、状态、电源、电源确认等多种功能。
一看到名称就会联想到前端界有名的弹匣layer.js，实际上在设计开发之初就以layer插件为参考实现了思想。
功能
提供函数表达式调用方法rlayer({…} )
rlayer弹框类型(toast|footer|actionsheetpicker|Android/IOs|context menu|drawer|ifration )
12+弹匣动画(fade in ) )。
引入组件
在需要组件的页面上引入rlayer组件。
//导入弹框单元RLayer
importrlayerfrom './components/rlayer '
快速使用
导入后可以用函数rlayer({…} )调用。
7+种个以上的参数可以自由组合，快速实现各种各样的个性化效果。
//msg消息
const showMsg=() ) )。
Rlayer({
content: '这是msg消息提示'，
shade close :假，
xclose: false，
time: 2
() )
}
//confirm询问框
const showConfirm=()={
let $el=rlayer({ (
标题： '问题标题'，
content : ' div style=' color : # 0070 F3； padding:30px； '确认框(这里是确认框提示信息，这里是确认框提示信息，这里是确认框提示信息(/div )，
shade close :假，
zIndex: 1001，
锁定滚动：假，
结果：真，
拖动输出：真，
btns: [
{
文本： '取消'，
时钟： (() )。
$el.close (
}
(，
{
文本：“确定”、
style : { color : ' # 61 dafb ' }为，
时钟： (() )。
handleInfo () )
}
}
]
() )
}
30+
classrlayercomponentextendsreact.com ponent {
//.
render ()。
let opt=this.state
return (
div class name={ DOM utils.class names (Rui _ layer )，{rui_layer-closed ) : opt.close cls } id={ ' block ' 3330 }
{}
{ opt.shadedivclass name=' rlayer _ _ overlay ' onclick={ this.shade clicked } style={ opacity 3360 opt.opacity }
{}
div class name={ DOM utils.class names } ' rlayer _ _ wrap '，opt.anim'anim-' opt.anim，opt.type ' popui _ ' opop
{ opt.titledivclassname=' rlayer _ _ wrap-tit ' dangerouslysetinnerhtml={ _ _ html 3360 opt.title }/div }
{ opt.type=='toast' opt.icon？ div class name={ DOM utils.class names (rlayer _ _ toast-icon )，' rlayer__toast-' opt.icon ) } dangerouslysesessesesessesese
div class name=' rlayer _ _ wrap-CNT box '
{ opt.content？
{
opt.type=='iframe '？
（
iframe scrolling=' auto ' allow transparency=' true ' frameborder='0' src={ opt.content }/iframe
）
:
(opt.type==' message '|opt.type==' notify '|opt.type==' popover '？)
（
div className='rlayer__wrap-cnt '
{ opt.iconiclass name={ DOM utils.class names } ' rlayer-msg _ icon '，opt.icon } dangerouslysetinnerhtml={ }
div class name=' rlayer-msg _ _ group '
{ opt.titledivclassname=' rlayer-msg _ title ' dangerouslysetinnerhtml={ _ _ html 3360 opt.title }/div }
{ typeof opt.content=='string '？
div class name=' rlayer-msg _ content ' dangerouslysetinnerhtml={ _ _ html 3360 opt.content }/div
:
div class name=' rlayer-msg _ _ content ' { opt.content }/div
() ) ) ) )。
/div
/div
) )
:
（
typeof opt.content=='string '？
(div class name=' rlayer _ _ wrap-CNT ' dangerouslysetinnerhtml={ _ _ html 3360 opt.content } }/div )
:
opt.content
) )
() ) ) ) )。
//
:
空值
() ) ) ) )。
/div
{}
{ opt.btnsdivclassname=' rlayer _ _ wrap-btns '
{
opt.btns.map () BTN，index )={
returnspan class name={ DOM utils.class names (' BTN )，{ ' BTN-disabled ' : BTN.disabled } } key={ index } style=
() )
() ) ) ) )。
/div
() ) ) ) )。
{ opt.xclosespanclass name={ DOM utils.class names } ' rlayer _ _ x close '！ opt.maximize opt.x position } style={ { color : opt.xcolor } } onclick={ this.close }/span }
{ opt.maximizespan class name=' rlayer _ _ maximize ' onclick={ this.maximize clicked }/span }
{ opt.resizespan class name=' rlayer _ _ resize '/span }
/div
{}
div class name=' rlayer _ _ drag fix '/div
/div
//
) )
() ) ) ) )。
() ) ) ) )。
RLayer弹框模板
classrlayercomponentextendsreact.com ponent {
静态默认属性={
//参数
id: '，//{string}控制弹层唯一标识，相同id共享一个实例
title: '，//{string}标题
content: '，//{字符串| element }内容(字符串或组件支持) ) ) ) ) ) ) ) )。
type: '，//{string}弹框型
层样式： '，//{object}自定义框的样式
icon: '，//{string} Toast图标(loading|success|fail ) ) ) ) ) ) ) ) ) )。
遮罩层是否显示在shade: true，//{bool}中
shadeClose: true，//{bool}是否单击遮罩层关闭弹匣
lockScroll: true，//{bool}弹出框显示时是否锁定body滚动
opacity: '，//{ number }遮罩层的透明度
xclose: true，//{bool}中是否显示关闭图标
xposition: 'right '，//{string}关闭图标的位置(top|right|bottom|left ) () ) ) ) ) ) )的位置
xcolor: '#333 '，//{string}关闭图标的颜色
anim: 'scaleIn '，//{string}弹框动画
position: 'auto '，//{string|array}弹框位置
drawer: '，//{string}抽屉组合(top|right|bottom|left ) () ) ) ) ) ) ) ) ) ) )。)
follow: null，//{string|array}跟随定位弹框
time: 0，//{number}弹匣自动关闭的秒数(1|2|3. )
zIndex: 8090，//{number}弹框层叠
topmost: false，//{bool}是否击中当前弹匣
area: 'auto '，//{string|array}弹框宽度高度
maxWidth: 375，//{number}弹框最大宽度(仅在area:'auto '的情况下设置有效) ) ) ) ) ) ) ) ) ) )。
maximize: false，//{bool}是否显示最大化按钮
fullscreen: false，//{bool}是全屏弹的吗
fixed: true，//{bool}要么固定弹框
drag: '.rlayer__wrap-tit '，//{ string }拖动元素
dragOut: false，//{bool}是否允许向浏览器外拖动
lockAxis: null，//{string}限制拖动方向选项： v垂直、h水平，默认情况下没有限制
resize: false，//{bool}弹匣是否允许拉伸
btns: null，//{array}组合按钮(参数：text|style|disabled|click ) ) ) ) ) ) )。
//事件
success: null，//{func}层弹出回调
结束： null，//{func}层销毁后回调
() ) ) ) )。
//.
() ) ) ) )。
导入从' react ' react '
import ReactDOM from 'react-dom '
//导入操作系统
import domUtils from './utils/dom '
let $index=0，$lockCount=0，$timer={}
classrlayercomponentextendsreact.com ponent {
constructor{
super(props )
this.state={
//.
() ) ) ) )。
this.closeTimer=null
() ) ) ) )。
组件修改
window.addevent listener (' resize '，this.autopos，false ) )。
() ) ) ) )。
componentWillUnmount
window.removeeventlistener (' resize '，this.autopos，false ) )。
cleartimeout(this.closetimer ) )。
() ) ) ) )。
open=(options )={
options.id=options.id|` rlayer-$ { DOM utils.generate id (} )
this.setState({ (
. this.props， options，opened: true，
、() ) )={
const { success }=this.state
type of success==' function ' success.call (this ) )。
this.auto () )
this.callback (
() )
() ) ) ) )。
close=() )。
const { opened，time，end，remove，rlayerOpts，action }=this.state
if (！ opened (返回)
this.setstate (close cls : true ) ) ) )。
cleartimeout(this.closetimer ) )。
this.closeTimer=setTimeout (
this.setState({ (
close cls :假，
opened :假，
() )
rlayer opts.lock scroll (if )
$lockcount---
if (！ $lockCount
document.body.style.padding right=' '
文档. body.class list.remove (RC-overflow-hidden ) )。
() ) ) ) )。
() ) ) ) )。
if(time ) (
$index--
() ) ) ) )。
if (动作==' update ' ) {
document.body.style.padding right=' '
文档. body.class list.remove (RC-overflow-hidden ) )。
() ) ) ) )。
rlayer opts.isbodyoverflow (document.body.style.overflow=' ' )
remove () )
type of end==' function ' end.call (this ) )。
(，200 )；
() ) ) ) )。
//弹框的位置
auto=() ) )。
//.
() ) ) ) )。
autopos=() )。
const { opened，id，fixed，follow，position }=this.state
if (！ opened (返回)
let oL，oT
let DOM=document.query selector (' # ' id )。
letrlayero=DOM.query selector (.rlayer _ _ wrap ) ) ) ) )。
if (！ 固定| {
rayero.style.position=' absolute '
() ) ) ) )。
letarea=[DOMutils.client(width ) ]，DOM utils.client (height )，rlayero.offsetWidth，rlayero.offsetHeight]
ol=(area[0]-area[2] )/2
ot=(area[1]-area[3] )/2
if(follow ) {
this.offset (
} else {
typeof position==='object '？ （
ol=parsefloat(position[0]|0，ot=parsefloat ) position[1]|0
) : (
position=='t '？ oT=0 :
position=='r '？ oL=area[0] - area[2] :
position=='b '？ oT=area[1] - area[3] :
position=='l '？ oL=0 :
position=='lt '？ (oL=0，oT=0) :
position=='rt '？ (oL=area[0] - area[2]，oT=0) :
position=='lb '？ (oL=0，oT=area[1] - area[3] ) :
position=='rb '？ oL=area[0] - area[2]，ot=area[1]-area[3]]:
空值
) )
rayero.style.left=parsefloat (fixed？ oL:DOMutils.scroll(left ) (ol ) (px ) )。
rayero.style.top=parsefloat (fixed？ oT:DOMutils.scroll(top ) ot )、) px )。
}
}
//跟随元素的位置
offset=() )。
const { id，follow }=this.state
let oW，oH，pS
let DOM=document.query selector (' # ' id )。
letrlayero=DOM.query selector (.rlayer _ _ wrap ) ) ) ) )。
oW=rlayero.offsetWidth
oH=rlayero.offsetHeight
PS=DOM utils.getfollowrect (follow，ow，oH ) )。
this.setstate ({ tip arrow : PS [2] } )
rlayero.style.left=pS[0] 'px '
rlayero.style.top=pS[1] 'px '
}
//最大化弹框
full=() ) )。
//.
}
//恢复弹框
还原=() ) )。
const { id，maximize，rlayerOpts }=this.state
let DOM=document.query selector (' # ' id )。
letrlayero=DOM.query selector (.rlayer _ _ wrap ) ) ) ) )。
Leto tit=DOM.query selector (.rlayer _ _ wrap-tit ) ) ) ) ) )。
Leto CNT=DOM.query selector (.rlayer _ _ wrap-CNT box ) ) ) ) ) ) ) )。
Leto BTN=DOM.query selector (.rlayer _ _ wrap-btns ) ) ) ) ) ) ) Leto BTN=DOM.query selector (.rlayer _ wrap-btns ) )
Leto max=DOM.query selector (.rlayer _ _ maximize ) ) )。
let t=otit？ otit.offsetHeight : 0
let b=obtn？ obtn.offsetHeight : 0
if (！ rlayerOpts.lockScroll ) {
rlayer opts.isbodyoverflow=false
this.setstate(rlayeropts ) ) )。
document.body.style.overflow=' '
}
maximize omax.class list.remove (maximized ) )。
rayero.style.left=parsefloat (rlayer opts.rect [0] ) ' px '
rayero.style.top=parsefloat (rlayer opts.rect [1] (px )。
rayero.style.width=parsefloat (rlayer opts.rect [2] ) ' px '
rlayero.style.height=parsefloat (rlayer opts.rect (() px ) ) ) ) )。
ocnt.style.height=parsefloat (rlayer opts.rect [3]-t-b ) ' px '
}
//拖动|缩放弹匣
move=() ) )。
//.
}
//事件处理
callback=() )。
const { time }=this.state
//倒计时并关闭弹框
if(time ) (
$index
//防止重复计数
if($Timer ) $index！=null ) clear time out ($ timer ($ index ) ) ) ) ) ) ) ) )。
$timer[$index]=setTimeout (
this.close () )
、parseint(time ) * 1000；
}
}
//点击最大化按钮
最大化clicked=(e )={
let o=e.target
if (o.class list.contains (' maximized ' ) ) }
//恢复
this.restore (
} else {
//最大化
this.full ()
}
}
//单击遮罩层
shadeClicked=(
if(this.State.shadeclose ) {
this.close () )
}
}
//按钮事件
BTNclicked=(index，e )={
let btn=this.state.btns[index]
if (！ btn.disabled ) {
type of BTN.click==' function ' BTN.click (
}
}
}
那么，以上就是基于React.js实现PC端弹出框组件。 希望能帮到大家。
