android2.2的弹窗控件,基于Taro多端自定义弹窗组件|Toast/msg/dialog信息框

基于React+Taro实现自定义Modal框|dialog对话框|Toast轻提示|msg信息框

支持自定义弹窗类型(msg/toast/ios/android)/弹窗样式、多个按钮事件/按钮样式、自动关闭、遮罩层、弹窗显示位置及自定义slot内容模板

实测H5+小程序+RN端效果如下：

自定义参数配置：

/**

* @ 弹窗默认配置

*/

static defaultProps = {

isVisible: false, //弹窗显示

title: '', //标题

content: '', //内容

contentStyle: null, //内容样式

style: null, //自定义弹窗样式

skin: '', //弹窗风格

icon: '', //弹窗图标

xclose: false, //自定义关闭按钮

shade: true, //遮罩层

shadeClose: true, //点击遮罩关闭

opacity: '', //遮罩透明度

time: 0, //自动关闭时间

end: null, //销毁弹窗回调函数

position: '', //弹窗位置显示

btns: null, //弹窗按钮 [{...args}, {...args}]

}

用法：

在相应页面引入组件

import TaroPop from '@components/taroPop'

import Taro from '@tarojs/taro'

import { View, Text } from '@tarojs/components'

// 引入弹窗组件

import TaroPop from '@components/taroPop'

export default class TaroPopDemo extends Taro.Component {

...

render() {

return (

...

{/* 弹窗模板 */}

);

}

}

通过如下方法调用组件内方法

this.refs.taroPop.show({...options})

this.refs.taroPop.close()

/**

* 显示弹窗事件

*/

show = (options) => {

this.setState({

...this.props