自定义confirm弹出框_超赞 React.js 桌面端自定义弹窗组件RLayer

最新推荐文章于 2024-08-20 09:01:30 发布

weixin_39806679

最新推荐文章于 2024-08-20 09:01:30 发布

阅读量967

点赞数

文章标签：自定义confirm弹出框

本文介绍了React.js开发的RLayer组件，它是一个桌面端交互式弹出框，集成了多种功能，如Dialog、Message、Notification等。RLayer提供了丰富的弹窗类型和动画效果，并支持超过30个参数来自定义各种效果。文章还提供了引入和快速使用的指导。

摘要由CSDN通过智能技术生成

今天给小伙伴们分享一个全新开发的React自定义对话框最近RLayer。

rlayer 基于react.js开发的PC桌面端交互式弹出框组件。融合了Dialog、Message、Notification、ActionSheet、Toast、Popover、Popconfirm等多种功能。

看名称就能联想到前端界有名的弹窗layer.js，其实在设计开发之初就有借鉴layer插件实现思想。

功能

提供函数式调用方法 rlayer({...})
12+弹框类型 (toast | footer | actionsheet | actionsheetPicker | android/ios | contextmenu | drawer | iframe | message | notify | popover)
7+种弹窗动画 (scaleIn | fadeIn | footer | fadeInUp | fadeInDown | fadeInLeft | fadeInRight)

引入组件

在需要使用组件的页面引入rlayer组件。

// 引入弹框组件RLayerimport rlayer from './components/rlayer'

快速使用

引入后即可通过函数rlayer({...})来调用即可。

支持超过30+个参数自由搭配，快速实现定制化的各种效果。

// msg消息const showMsg = () => {    rlayer({        content: "这是一条msg消息提示",        shadeClose: false,        xclose: false,        time: 2    })}// confirm询问框const showConfirm = () => {    let $el = rlayer({        title: '询问标题',        content: "

确认框(这里是确认框提示信息，这里确认框提示信息，这里是确认框提示信息)

", shadeClose: false, zIndex: 1001, lockScroll: false, resize: true, dragOut: true, btns: [ { text: '取消', click: () => { $el.close() } }, { text: '确定', style: {color: '#61dafb'}, click: () => { handleInfo() } } ] })}