@lx-react-materiel/mp-dialog

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	点击确定按钮回调	--