气泡确认框

@aligov/balloon-confirm

API

参数名 说明 必填 类型 默认值 备注
size 弹框尺寸，small 或 medium 否 string 'small'
align 弹框定位，具体见 Balloon 否 string 'br' 默认 alignEdge
icon fusion icon type 或 icon 元素 否 string/ React Node 'warning'
title 弹出层标题 否 string ''
content 弹出层内容 否 string / React Node
onOk 确认键回调 否 funtion
okText 确认键文字 否 string '确认'
onCancel 取消键回调 否 funtion noop
cancelText 取消键文字 否 string '取消'
balloonProps 透传给 Balloon 的参数，具体见 Balloon 否 object {}
className 类名 否 string ''
disabled 是否禁用 否 Boolean false

onOk 和 onCancel 在为 falsy 时，对应的确定和取消按钮则不渲染出来。这两个函数可以是普通函数或异步函数（返回 promise），并且在返回 false 或 resolve false 时阻止关闭弹层。

另外，onOk 如果是一个异步函数，那么在 resolve 前，确定按钮展示 loading 状态并且阻止再次点击。

DEMO 列表

基础用法

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BalloonConfirm from "@aligov/balloon-confirm";
import { Button, Message } from '@alifd/next';

function handleOk() {
  console.log('handle ok');
}

function handleFalseOk() {
  Message.error('操作失败');
  return false;
}

class App extends Component {
  render() {
    return (
      <div style={{ textAlign: 'right' }}>
        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          content="删除后将无法恢复，请谨慎操作"
          onOk={handleOk}
        >
          <Button type="primary">删除</Button>
        </BalloonConfirm>

        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          onOk={handleOk}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>只有标题</Button>
        </BalloonConfirm>

        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          icon="prompt"
          onOk={handleOk}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>修改图标</Button>
        </BalloonConfirm>

        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          icon="prompt"
          onOk={handleOk}
          onCancel={null}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>移除取消按钮</Button>
        </BalloonConfirm>

        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          icon="prompt"
          okText="删除"
          cancelText="放弃"
          onOk={handleOk}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>自定义按钮文案</Button>
        </BalloonConfirm>

        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          onOk={handleFalseOk}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>确定失败不关闭</Button>
        </BalloonConfirm>
      </div>
    );
  }
}

ReactDOM.render(<App/>, mountNode);

尺寸

气泡弹框的尺寸有 small 和 medium，默认是 small。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BalloonConfirm from "@aligov/balloon-confirm";
import { Button } from '@alifd/next';

function handleOk() {
  console.log('handle');
}

class App extends Component {
  render() {
    return (
      <div style={{ textAlign: 'right' }}>
        <BalloonConfirm
          title="确定删除目标吗？"
          onOk={handleOk}
        >
          <Button type="primary">默认尺寸</Button>
        </BalloonConfirm>

        <BalloonConfirm
          size="medium"
          title="确定删除目标吗？"
          content="删除后将无法恢复，请谨慎操作"
          onOk={handleOk}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>中等尺寸</Button>
        </BalloonConfirm>
      </div>
    );
  }
}

ReactDOM.render(<App/>, mountNode);

异步操作

onOk 和 onCancel 函数可以是返回 promise 的函数或 async 函数。函数返回 false 或异步函数 resolve false 时，组织弹框关闭。

并且 onOk 是异步函数时，在 resolve 前，确定按钮会展示 loading 状态并禁止再次点击。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BalloonConfirm from "@aligov/balloon-confirm";
import { Button } from '@alifd/next';

function handleOk() {
  return new Promise(resolve => {
    setTimeout(resolve, 1500);
  });
}

class App extends Component {
  render() {
    return (
      <div style={{ textAlign: 'right' }}>
        <BalloonConfirm
          title="确定删除目标吗？"
          onOk={handleOk}
        >
          <Button type="primary">删除</Button>
        </BalloonConfirm>
      </div>
    );
  }
}

ReactDOM.render(<App/>, mountNode);

气泡定位

默认定位是弹框位于右下方，可以通过 align 或 balloonProps 里的更多属性来改变定位，具体见 Balloon。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BalloonConfirm from "@aligov/balloon-confirm";
import { Button } from '@alifd/next';

function handleOk() {
}

class App extends Component {
  render() {
    return (
      <div style={{ margin: '100px 200px'}}>
        <BalloonConfirm
          title="确定删除目标吗？"
          onOk={handleOk}
          align="tl"
        >
          <Button type="primary">左上定位</Button>
        </BalloonConfirm>

        <BalloonConfirm
          title="确定删除目标吗？"
          onOk={handleOk}
        >
          <Button type="primary" style={{ marginLeft: 20 }}>默认定位</Button>
        </BalloonConfirm>

      </div>
    );
  }
}

ReactDOM.render(<App/>, mountNode);