rax-modal

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

rax-modal 提供了弹出遮罩层的能力，为 Alert, Confirm 等对话框组件提供底层能力。

安装

$ npm install rax-modal --save

属性

属性	类型	默认值	必填	描述	支持
visible	boolean		true	控制弹层是否显示
contentStyle	object		false	自定义内容容器样式
onShow	function	undefined	false	当弹层显示的时候触发回调
onHide	function	undefined	false	当弹层关闭的时候触发回调
onMaskClick	function		false	点击蒙层触发的函数
maskCanBeClick	boolean	true	false	蒙层是否可点击(该属性不建议使用，建议通过 onMaskClick 修改 visible 状态来控制弹窗显隐，该属性会在下一次 break change 的时候移除)
delay	number	0	false	延迟，毫秒
animation	boolean	[300, 300]	false	动画持续时间(毫秒), 如果是数组，则分别表示打卡动画时间和关闭动画时间
duration	number 或者 [number, number]	[300, 300]	false	动画持续时间(毫秒), 如果是数组，则分别表示打卡动画时间和关闭动画时间

注：支持列表中的 代表h5 代表weex 代表小程序 代表头条小程序 代表快应用

示例

import { createElement, Component, render } from 'rax';
import Modal from 'rax-modal';

const Demo = props => {
  const [visible, setVisible] = useState(false);
  return [
    <View onClick={() => setVisible(true)}>
      <Text>open</Text>
    </View>,
    <Modal
      visible={visible}
      onHide={() => {
        console.log('hide');
      }}
      onShow={() => {
        console.log('show');
      }}
      onMaskClick={() => {
        setVisible(false);
      }}
      contentStyle={{
        position: 'absolute',
        top: '150rpx',
        width: '400rpx',
        left: '175rpx',
      }}
    >
      <Text>这里是弹窗内容</Text>
    </Modal>,
  ];
};

render(<Demo />);

注意

在阿里巴巴系列小程序中使用该组件时需要开启 component2。