跳到主要内容

气泡提示

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

版本变化​

无