mp-dialog
模态对话框
该组件只能在 ** Taro3 ** 中使用
代码示例
import MpDialog from '@lx-react-materiel/mp-dialog';
const Demo = () => {
const [visible, setVisible] = useState<boolean>(false);
const handleShowDialog = () => {
setVisible(true);
};
const handleCancel = () => {
console.log('cancel');
setVisible(false);
};
const handleConfirm = () => {
console.log('confirm');
setVisible(false);
};
return (
<View>
<View onClick={handleShowDialog}>显示对话框</View>
<MpDialog
visible={visible}
title="标题"
showCancelButton
onCancel={handleCancel}
onConfirm={handleConfirm}
>
<View>dialog content</View>
</MpDialog>
</View>
);
}
API
Props
参数 |
说明 |
类型 |
默认值 |
必填 |
visible |
是否显示对话框 |
boolean |
-- |
是 |
title |
标题 |
string |
-- |
是 |
showCancelButton |
是否显示取消按钮 |
boolean |
false |
否 |
showConfirmButton |
是否显示确认按钮 |
boolean |
true |
否 |
cancelButtonText |
取消按钮文字 |
string |
'取消' |
否 |
confirmButtonText |
确认按钮文字 |
string |
'确定' |
否 |
children |
对话框内容 |
React.ReactNode |
null |
否 |
titleColor |
标题文字颜色 |
string |
'#333' |
否 |
cancelButtonColor |
取消按钮文字颜色 |
string |
'#989ea9' |
否 |
confirmButtonColor |
确认按钮文字颜色 |
string |
'#1890ff' |
否 |
isCatchMove |
是否滚动穿透/不传默认false 代表允许滚动穿透(传递true内部滚动请使用ScrollView) |
boolean |
false |
否 |
Events
事件 |
说明 |
回调参数 |
onCancel |
点击取消按钮回调 |
-- |
onConfirm |
点击确定按钮回调 |
-- |