BalloonConfirm 气泡确认框

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/balloon-confirm@1.0.4 -S

ICE 气泡确认框

安装和升级

npm install @icedesign/balloon-confirm

开发指南

气泡确认框

何时使用

• 当目标操作需要进一步确认时，弹出确认框，询问用户。

• 该组件作为一个轻量级的确认交互，不宜在内部放过多元素。如需较多定制，可直接使用Balloon组件。

使用注意

• 因为内部使用Balloon组件，所以对于子元素是自定义React Component的情况，需要主动传递onMouseEnter、onMouseLeave、onClick事件。

• 更多props可参考Balloon组件，其中triggerType默认为click。

API

气泡确认框

代码示例

基础用法

使用BalloonConfirm生成一个简单的确认弹窗

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import BalloonConfirm from '@icedesign/balloon-confirm';
import { Button, Message } from '@alifd/next';
class App extends Component {
  onConfirm = (e) => {
    console.log('ok');
    Message.success('click on ok')
  }
  onCancel = (e) => {
    console.log('cancel');
    Message.error('click on cancel')
  }
  render() {
    return (
        <BalloonConfirm
          onConfirm={this.onConfirm}
          onCancel={this.onCancel}
          title="真的要删除吗亲"
        >
          <Button>删除</Button>
        </BalloonConfirm>
    );
  }
}
class Test extends Component {
  render() {
    return (
      <div {...this.props}>测试</div>
    );
  }
}
ReactDOM.render((
  <App />
), mountNode);

子元素为自定义组件

当子元素为自定义组件时，主动传递上层事件

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import BalloonConfirm from '@icedesign/balloon-confirm';
import { Button, Message } from '@alifd/next';
class App extends Component {
  onConfirm = (e) => {
    console.log('ok');
    Message.success('click on ok')
  }
  onCancel = (e) => {
    console.log('cancel');
    Message.error('click on cancel')
  }
  render() {
    return (
        <BalloonConfirm
          onConfirm={this.onConfirm}
          onCancel={this.onCancel}
          title="真的要删除吗亲"
        >
          <DeleteText />
        </BalloonConfirm>
    );
  }
}
class DeleteText extends Component {
  render() {
    return (
      <span 
        {...this.props}
        style={{
          color: '#f00',
        }}
      >
        删除
      </span>
    );
  }
}
ReactDOM.render((
  <App />
), mountNode);

相关区块

暂无相关区块