BalloonConfirm 气泡确认框

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

安装方法

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

ICE 气泡确认框

安装和升级

  1. npm install @icedesign/balloon-confirm

开发指南

气泡确认框

何时使用

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

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

使用注意

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

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

API

气泡确认框

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

代码示例

基础用法

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

BalloonConfirm 气泡确认框 - 图1

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import BalloonConfirm from '@icedesign/balloon-confirm';
  4. import { Button, Message } from '@alifd/next';
  5. class App extends Component {
  6. onConfirm = (e) => {
  7. console.log('ok');
  8. Message.success('click on ok')
  9. }
  10. onCancel = (e) => {
  11. console.log('cancel');
  12. Message.error('click on cancel')
  13. }
  14. render() {
  15. return (
  16. <BalloonConfirm
  17. onConfirm={this.onConfirm}
  18. onCancel={this.onCancel}
  19. title="真的要删除吗亲"
  20. >
  21. <Button>删除</Button>
  22. </BalloonConfirm>
  23. );
  24. }
  25. }
  26. class Test extends Component {
  27. render() {
  28. return (
  29. <div {...this.props}>测试</div>
  30. );
  31. }
  32. }
  33. ReactDOM.render((
  34. <App />
  35. ), mountNode);

子元素为自定义组件

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

BalloonConfirm 气泡确认框 - 图2

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import BalloonConfirm from '@icedesign/balloon-confirm';
  4. import { Button, Message } from '@alifd/next';
  5. class App extends Component {
  6. onConfirm = (e) => {
  7. console.log('ok');
  8. Message.success('click on ok')
  9. }
  10. onCancel = (e) => {
  11. console.log('cancel');
  12. Message.error('click on cancel')
  13. }
  14. render() {
  15. return (
  16. <BalloonConfirm
  17. onConfirm={this.onConfirm}
  18. onCancel={this.onCancel}
  19. title="真的要删除吗亲"
  20. >
  21. <DeleteText />
  22. </BalloonConfirm>
  23. );
  24. }
  25. }
  26. class DeleteText extends Component {
  27. render() {
  28. return (
  29. <span
  30. {...this.props}
  31. style={{
  32. color: '#f00',
  33. }}
  34. >
  35. 删除
  36. </span>
  37. );
  38. }
  39. }
  40. ReactDOM.render((
  41. <App />
  42. ), mountNode);

相关区块

BalloonConfirm 气泡确认框 - 图3

暂无相关区块