eo-popover
<eo-popover>
Alias:
<basic.general-popover>
通用弹出层构件
Examples
Triggers
Placements
Custom Style
Disabled
Properties
Name | Description | Type | Default | Required |
---|---|---|---|---|
placement | 弹出层放置位置 | Placement | ||
trigger | 弹出触发方式 | TriggerEvent | "click" | |
active | 弹出层是否已激活 | boolean | false | |
arrow | 弹出层是否显示箭头 | boolean | true | |
shiftPadding | 发生移位行为之前超出的填充量 | number | ||
arrowColor | 箭头颜色 | string | ||
strategy | 弹出层如何定位 | "absolute" | "fixed" | "absolute" | |
sync | 将弹出层的宽高与 anchor 元素同步 | Sync | ||
disabled | 是否禁用 | boolean | ||
distance | 弹出窗口与其锚点之间的距离 | number | ||
anchorDisplay | 触发器的显示类型 | CSSProperties["display"] | "inline-block" | |
zIndex | 弹出层的 Z 轴顺序 | number |
Slots
Name | Description |
---|---|
(default) | 弹出层内容 |
anchor | 触发弹出层的元素 |
Events
Name | Description | Event Detail |
---|---|---|
visible.change | 当弹出层可见性变化之后触发 | boolean - 当前是否可见 |
before.visible.change | 当弹出层可见性变化时触发 | boolean - 当前是否可见 |
Parts
Name | Description |
---|---|
popup | The popup’s container. Useful for setting a background color, box shadow, etc. |
Type references
Placement
"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"
TriggerEvent
"click" | "hover"
Sync
"width" | "height" | "both"