MUI消息框(alert, confirm, prompt, toast)的使用

MUI消息框是用户与应用程序进行交互的重要方式之一，它可以向用户显示警告、确认、提示和轻量级提示信息。以下是MUI消息框(alert, confirm, prompt, toast)的使用方法和注意事项。

1. Alert消息框
   Alert消息框用于显示重要的警告信息，通常包含一个标题、一个描述和一个确定按钮。使用方法如下：

   // 引入MUI组件库和样式库
   import MuiAlert from 'muicss/lib/react/alert';
   import 'muicss/lib/react/css/alert.css';
   // 渲染Alert消息框
   <MuiAlert type='alert' showIcon message='这是一个警告信息！' />

   注意事项：

• Alert消息框的type属性可选值为’alert’、’success’、’info’、’warning’和’error’，用于设置消息框的样式。
• 可以使用showIcon属性来控制是否显示图标。
• message属性用于设置消息内容。

1. Confirm消息框
   Confirm消息框用于显示一个带有确认和取消按钮的对话框，通常用于确认用户的操作。使用方法如下：

   // 引入MUI组件库和样式库
   import MuiConfirm from 'muicss/lib/react/confirm';
   import 'muicss/lib/react/css/confirm.css';
   // 渲染Confirm消息框
   <MuiConfirm showClose={true} message='您确定要执行该操作吗？' />

   注意事项：

• Confirm消息框的showClose属性用于控制是否显示关闭按钮。
• message属性用于设置消息内容。
• 可以通过事件处理函数来处理用户的确认或取消操作。

1. Prompt消息框
   Prompt消息框用于获取用户的输入，通常包含一个标题、一个输入框和一个确定按钮。使用方法如下：

   // 引入MUI组件库和样式库
   import MuiPrompt from 'muicss/lib/react/prompt';
   import 'muicss/lib/react/css/prompt.css';
   // 渲染Prompt消息框
   <MuiPrompt type='prompt' message='请输入内容：' onCancel={handleCancel} onSubmit={handleSubmit} />

   注意事项：

• Prompt消息框的type属性可选值为’prompt’，用于设置消息框的样式。
• message属性用于设置消息内容。
• onCancel属性用于处理取消操作，onSubmit属性用于处理用户输入内容后的提交操作。
• 可以通过其他props来自定义Prompt消息框的外观和行为。

1. Toast消息框
   Toast消息框是一种轻量级的提示信息，通常用于显示一些短暂的通知或提示。使用方法如下：

   // 引入MUI组件库和样式库
   import MuiToast from 'muicss/lib/react/toast';
   import 'muicss/lib/react/css/toast.css';
   // 渲染Toast消息框
   <MuiToast message='这是一条提示信息！' duration={3000} />

   注意事项：

• Toast消息框的message属性用于设置消息内容。
• duration属性用于设置Toast消息框的显示时间（单位为毫秒）。默认值为3000毫秒（3秒）。可以根据需要调整该值来控制Toast消息框的显示时间。