README
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
。