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