气泡提示
WdBubble
适用场景#
用于显示气泡的提示。
示例#
不同触发行为的显示#
不同弹出方向的显示#
不同风格的气泡#
气泡延时打开和关闭#
属性#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 触发行为 | trigger | "hover"|"click" | 基础属性 | "hover" | 触发气泡提示的行为 |
| 弹出方向 | placement | "top"|"top-start"|"top-end"|"left"|"left-start"|"left-end"|"bottom"|"bottom-start"|"bottom-end"|"right"|"right-start"|"right-end" | 基础属性 | "top" | 气泡提示的弹出方向 |
| 气泡风格 | promptTheme | "default"|"error"|"dark" | 基础属性 | "default" | 气泡提示的风格 |
| 打开时延(毫秒) | openDelay | number | 高级属性 | 0 | 气泡提示的打开时延(毫秒) |
| 关闭时延(毫秒) | closeDelay | number | 高级属性 | 0 | 气泡提示的关闭时延(毫秒) |
| 箭头是否指向中心 | arrowPointAtCenter | boolean | 高级属性 | false | 气泡提示的箭头是否指向中心 |
事件#
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 打开气泡 | open | WEB端 | - | |
| 关闭气泡 | close | WEB端 | - |
属性 API#
通过属性 API，可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
|---|
| 触发行为 | trigger | "hover"|"click" | 触发气泡提示的行为 |
| 弹出方向 | placement | "top"|"top-start"|"top-end"|"left"|"left-start"|"left-end"|"bottom"|"bottom-start"|"bottom-end"|"right"|"right-start"|"right-end" | 气泡提示的弹出方向 |
| 气泡风格 | promptTheme | "default"|"error"|"dark" | 气泡提示的风格 |
方法 API#
无样式 API#
通过样式 API，可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
|---|
| 根元素 | .wd-bubble | 气泡组件根元素 |
| 触发内容父元素 | .wd-bubble-child | 气泡插槽触发内容的父级元素，可以设置内容内部样式 |
| PC 端气泡根元素 | .wd-pc-bubble | 可以为 PC 端的气泡编写样式 |
| H5 端气泡根元素 | .wd-h5-bubble | 可以为 H5 端的气泡编写样式 |
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;}版本变化#
无