1# Popup控制 2 3给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 接口 11 12 13| 名称 | 参数类型 | 描述 | 14| ---------- | ------------------------------------- | --------------------------------------- | 15| bindPopup | show: boolean,<br/>popup: [PopupOptions](#popupoptions类型说明) \| [CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。<br/>show: 弹窗显示状态，默认值为false，隐藏弹窗。<br/>popup: 配置当前弹窗提示的参数。 | 16 17## PopupOptions类型说明 18 19| 名称 | 类型 | 必填 | 描述 | 20| -------------------------| ------------------------------------------------| -----| ----------------------------------------- | 21| message | string | 是 | 弹窗信息内容。 | 22| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 | 23| primaryButton | {<br/>value: string,<br/>action: () => void<br/>} | 否 | 第一个按钮。<br/>value: 弹窗里主按钮的文本。<br/>action: 点击主按钮的回调函数。 | 24| secondaryButton | {<br/>value: string,<br/>action: () => void<br/>} | 否 | 第二个按钮。<br/>value: 弹窗里辅助按钮的文本。<br/>action: 点击辅助按钮的回调函数。 | 25| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | 26 27## CustomPopupOptions<sup>8+</sup>类型说明 28 29| 名称 | 类型 | 必填 | 描述 | 30| -------------------------| ------------------------- | ---- | ---------------------------------------------------- | 31| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | 32| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom | 33| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 | 34| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | 35| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。<br/>默认值：true | 36| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true | 37| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | 38 39 40## 示例 41```ts 42// xxx.ets 43@Entry 44@Component 45struct PopupExample { 46 @State handlePopup: boolean = false 47 @State customPopup: boolean = false 48 49 // popup构造器定义弹框内容 50 @Builder popupBuilder() { 51 Row({ space: 2 }) { 52 Image($r("app.media.image")).width(24).height(24).margin({ left: -5 }) 53 Text('Custom Popup').fontSize(10) 54 }.width(100).height(50).padding(5) 55 } 56 57 build() { 58 Flex({ direction: FlexDirection.Column }) { 59 // PopupOptions 类型设置弹框内容 60 Button('PopupOptions') 61 .onClick(() => { 62 this.handlePopup = !this.handlePopup 63 }) 64 .bindPopup(this.handlePopup, { 65 message: 'This is a popup with PopupOptions', 66 placementOnTop: true, 67 primaryButton: { 68 value: 'confirm', 69 action: () => { 70 this.handlePopup = !this.handlePopup 71 console.info('confirm Button click') 72 } 73 }, 74 // 第二个按钮 75 secondaryButton: { 76 value: 'cancel', 77 action: () => { 78 this.handlePopup = !this.handlePopup; 79 console.info('cancel Button click') 80 } 81 }, 82 onStateChange: (e) => { 83 console.info(e.isVisible.toString()) 84 if (!e.isVisible) { 85 this.handlePopup = false 86 } 87 } 88 }) 89 .position({ x: 100, y: 50 }) 90 91 92 // CustomPopupOptions 类型设置弹框内容 93 Button('CustomPopupOptions') 94 .onClick(() => { 95 this.customPopup = !this.customPopup 96 }) 97 .bindPopup(this.customPopup, { 98 builder: this.popupBuilder, 99 placement: Placement.Top, 100 maskColor: 0x33000000, 101 popupColor: Color.Yellow, 102 enableArrow: true, 103 onStateChange: (e) => { 104 if (!e.isVisible) { 105 this.customPopup = false 106 } 107 } 108 }) 109 .position({ x: 80, y: 200 }) 110 }.width('100%').padding({ top: 5 }) 111 } 112} 113``` 114 115 116
