BalloonConfirm 气泡确认框

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的情况，需要主动传递onMouseEnter、onMouseLeave、onClick事件。

• 更多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生成一个简单的确认弹窗

查看源码在线预览

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

子元素为自定义组件

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

查看源码在线预览

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

相关区块