跳到主要内容

气泡提示

WdBubble

适用场景

用于显示气泡的提示。

示例

不同触发行为的显示

不同弹出方向的显示

不同风格的气泡

气泡延时打开和关闭

属性

组件接收的外部传入的属性

属性名
属性标识
类型
说明
触发行为triggerstring

触发气泡提示的行为

默认值:"hover"

弹出方向placementstring

气泡提示的弹出方向

默认值:"top"

气泡风格promptThemestring

气泡提示的风格

默认值:"default"

打开时延(毫秒)openDelaynumber

气泡提示的打开时延(毫秒)

0
关闭时延(毫秒)closeDelaynumber

气泡提示的关闭时延(毫秒)

默认值:200

箭头是否指向中心arrowPointAtCenterboolean

气泡提示的箭头是否指向中心

事件

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
打开气泡openWEB端

-

关闭气泡closeWEB端

-

属性 API

通过属性 API,可以获取组件内部的状态和属性值,可以通过$w.componentId.propertyName 来访问组件内部的值,如 $w.input1.value ,详请请参考 属性 API

只读属性名
属性标识
类型
说明
触发行为triggerstring

触发气泡提示的行为

弹出方向placementstring

气泡提示的弹出方向

气泡风格promptThemestring

气泡提示的风格

方法 API

样式 API

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义,例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式,通过 :scope 可以控制单个组件样式, 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-bubble气泡组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-bubble {
  /* 在这里编写CSS 样式 */
}
触发内容父元素.wd-bubble-child气泡插槽触发内容的父级元素,可以设置内容内部样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-bubble-child {
  /* 在这里编写CSS 样式 */
}
PC 端气泡根元素.wd-pc-bubble可以为 PC 端的气泡编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-bubble {
  /* 在这里编写CSS 样式 */
}
H5 端气泡根元素.wd-h5-bubble可以为 H5 端的气泡编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-bubble {
  /* 在这里编写CSS 样式 */
}
气泡弹出层容器.wedatea2td-bubble可以为弹出的气泡设置样式,例如宽度,目前弹出的气泡最大宽度为 300px,可以设置max-width更改为其他宽度
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wedatea2td-bubble {
  /* 在这里编写CSS 样式 */
}

了解样式 API

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;
}

版本变化