BalloonConfirm 气泡确认框

ICE 气泡确认框

安装和升级

npm install @icedesign/balloon-confirm

开发指南

气泡确认框

何时使用

使用注意

API

气泡确认框

参数名 说明 必填 类型 默认值 备注
className 样式名 否 string -
title 确认框描述 否 string -
confirmText 确认按钮文本 否 string '确认'
cancelText 取消按钮文本 否 string '取消'
onConfirm 点击确认的回调 否 function(e) -
onCanel 点击取消的回调 否 function(e) -
Icon 自定义气泡图标 否 ReactNode <Icon type="warning" style={{ color: '#FFA003' }} />

DEMO 列表

基础用法

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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import BalloonConfirm from '@icedesign/balloon-confirm';
import { Button, Feedback } from '@icedesign/base';


class App extends Component {
  onConfirm = (e) => {
    console.log('ok');
    Feedback.toast.success('click on ok')
  }

  onCancel = (e) => {
    console.log('cancel');
    Feedback.toast.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, Feedback } from '@icedesign/base';


class App extends Component {
  onConfirm = (e) => {
    console.log('ok');
    Feedback.toast.success('click on ok')
  }

  onCancel = (e) => {
    console.log('cancel');
    Feedback.toast.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);