气泡提示
WdBubble
适用场景
用于显示气泡的提示。
示例
不同触发行为的显示
不同弹出方向的显示
不同风格的气泡
气泡延时打开和关闭
属性
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
|---|
| 触发行为 | trigger | string | 触发气泡提示的行为 默认值："hover" |
| 弹出方向 | placement | string | 气泡提示的弹出方向 默认值："top" |
| 气泡风格 | promptTheme | string | 气泡提示的风格 默认值："default" |
| 打开时延(毫秒) | openDelay | number | 气泡提示的打开时延(毫秒) |
| 关闭时延(毫秒) | closeDelay | number | 气泡提示的关闭时延(毫秒) 默认值：200 |
| 箭头是否指向中心 | arrowPointAtCenter | boolean | 气泡提示的箭头是否指向中心 |
事件
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 打开气泡 | open | WEB端 | - | |
| 关闭气泡 | close | WEB端 | - |
属性 API
通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API
只读属性名 | 属性标识 | 类型 | 说明 |
|---|
| 触发行为 | trigger | string | 触发气泡提示的行为 |
| 弹出方向 | placement | string | 气泡提示的弹出方向 |
| 气泡风格 | promptTheme | string | 气泡提示的风格 |
方法 API
无样式 API
通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，详请请参考样式 API
名称 | 类名 | 说明 |
|---|
| 根元素 | .wd-bubble | 气泡组件根元素 |
| 触发内容父元素 | .wd-bubble-child | 气泡插槽触发内容的父级元素，可以设置内容内部样式 |
| PC 端气泡根元素 | .wd-pc-bubble | 可以为 PC 端的气泡编写样式 |
| H5 端气泡根元素 | .wd-h5-bubble | 可以为 H5 端的气泡编写样式 |
| 气泡弹出层容器 | .wedatea2td-bubble | 可以为弹出的气泡设置样式，例如宽度，目前弹出的气泡最大宽度为 300px，可以设置max-width更改为其他宽度 |
CSS 变量
.wd-bubble {
// 气泡提示的上外边距
--wd-bubble-top: 0px;
// 气泡内容的左右内边距
--wd-bubble-inner-horizontal-padding: 12px;
// 气泡内容的上下内边距
--wd-bubble-inner-vertical-padding: 8px;
// 气泡内容的圆角
--wd-divider-inner-border-radius: 3px;
}
版本变化
无