Alert 确认对话框

弹出对话框会在继续之前，通知用户重要信息，点击确定后异步关闭对话框。

import { Alert } from 'uiw';
// or
import Alert from '@uiw/react-alert';

基本用法

import React from 'react';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible1: false,
      visible2: false,
    }
  }
  onClick(type) {
    this.setState({ [type]: !this.state[type] });
  }
  onClosed(type) {
    this.setState({ [type]: false });
  }
  render() {
    return (
      <div>
        
         console.log('您点击了确定按钮！')}
          onCancel={() =&gt; console.log('您点击了取消按钮！')}
          onClosed={this.onClosed.bind(this, 'visible2')}
        &gt;
          这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后，此对话框将关闭，触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。用作通知用户重要信息。
        
        
          <button>单个按钮确认对话框</button>
          <button>确认对话框</button>
        
      </div>
    )
  }
}
export default Demo

延迟关闭对话框

这里是利用 Promise 等它执行完成再去关闭窗口

import React from 'react';
import { Alert, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick() {
    this.setState({ visible: !this.statevisible });
  }
  onClosed() {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
         {
            console.log('确定回调！, 这里是利用Promise等执行完成再去关闭窗口');
            return new Promise((resolve, reject) =&gt; {
              const random = Math.random();
              console.log('测试，随机值大于 0.5 执行 resolve 事件，否则 执行 reject 触发 catch 错误', random, random &gt; 0.5)
              setTimeout(random &gt; 0.5 ? resolve : reject, 3000);
            }).catch(() =&gt; {
              // 可以通过下面方式，阻止弹框消失
              // throw new Error();
            });
          }}
          onClosed={this.onClosed.bind(this, 'visible')}
        &gt;
          这里是利用 <b>Promise</b> 的特性，等它执行完成后，再去关闭窗口，达到延迟关闭的效果。<br><br>
          这个测试例子，生成随机值判断是否大于 <b>0.5</b> 执行 <b>resolve</b> 事件，否则 执行 <b>reject</b> 触发 <b>catch</b> 错误。
        
        <button>延迟关闭对话框</button>
      </div>
    )
  }
}
export default Demo

带图标的弹出框

通过设置 icon 和 type 参数设置带状态的弹出对话框。

import React from 'react';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible1: false,
      visible2: false,
    }
  }
  onClick(type) {
    this.setState({ [type]: !this.state[type] });
  }
  onClosed(type) {
    this.setState({ [type]: false });
  }
  render() {
    return (
      <div>
        
        
        
        
        
        
          这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后，此对话框将关闭，触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。用作通知用户重要信息。
        
        
          <button type="primary">主要</button>
          <button type="success">成功</button>
          <button type="warning">警告</button>
          <button type="danger">错误</button>
          <button type="light">亮按钮</button>
          <button type="dark">暗按钮</button>
        
      </div>
    )
  }
}
export default Demo

带标题的弹出框

import React from 'react';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible1: false,
      visible2: false,
    }
  }
  onClick(type) {
    this.setState({ [type]: !this.state[type] });
  }
  onClosed(type) {
    this.setState({ [type]: false });
  }
  render() {
    return (
      <div>
        
        
        
        
        
        
          这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后，此对话框将关闭，触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。用作通知用户重要信息。
        
        
          <button type="primary">主要</button>
          <button type="success">成功</button>
          <button type="warning">警告</button>
          <button type="danger">错误</button>
          <button type="light">亮按钮</button>
          <button type="dark">暗按钮</button>
        
      </div>
    )
  }
}
export default Demo

自定义按钮

这个对话框有两个按钮，单击 确定按钮 或 取消按钮 后，此对话框将关闭，将不触发 onConfirm 或 onCancel 事件。因为这俩按钮是自定义按钮。你可以正对自定义按钮外面的对象定义 className="w-alert-footer" 将显示默认样式。

import React from 'react';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick(type) {
    this.setState({ visible: !this.state.visible });
  }
  onClosed(type) {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        
          这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后，此对话框将关闭，将不触发 “<del>onConfirm</del>” 或 “<del>onCancel</del>” 事件。因为这俩按钮是自定义按钮。
          <br><br>
          <div>
            <button type="danger">确定按钮</button>
            <button>取消按钮</button>
          </div>
        
        
          <button>单个按钮确认对话框</button>
        
      </div>
    )
  }
}
export default Demo

不显示遮罩层

import React from 'react';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick(type) {
    this.setState({ visible: !this.state.visible });
  }
  onClosed(type) {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        
          这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后，此对话框将关闭，将不触发 “<del>onConfirm</del>” 或 “<del>onCancel</del>” 事件。因为这俩按钮是自定义按钮。
        
        
          <button>单个按钮确认对话框</button>
        
      </div>
    )
  }
}
export default Demo

Props

虽然类似于对 ，但 更具限制性，只应用于重要信息。此组件继承 [](#/components/modal) 的属性，所以部分参数可以参考 组件。

更多属性文档请参考 Modal。