Picker Demo

精简结构、统一样式、集中配置,便于快速验证各类定位与触发方式。

Build: public/index.html Device: Detecting

Container · Click

弹层挂载在目标元素内,点击触发。包含一个可销毁的实例。

提示:销毁后可以刷新页面重新创建。

Container · Hover

Hover 触发 + 容器挂载,适合展示气泡式信息。

Body · Hover

弹层挂载在 body,适合全局浮层使用场景。

Body · Click

弹层挂载在 body,点击触发,适合全局弹窗场景。

Container · Click · Offset

容器挂载 + 点击触发,配合偏移量调整弹层位置。

Body · Click · Offset

Body 挂载 + 点击触发,配合偏移量调整弹层位置。

Offset · Hover

偏移量示例:适合让气泡留出可视间距。

Boundary · Container

通过 boundaryContainer 指定边界节点(虚线框):弹层不会溢出该范围,默认为 window 窗口。

定位翻转与最终裁剪都以该虚线框为参考,不再以浏览器视口为准。

API 使用

通过实例属性 / 方法动态控制弹层:new Picker(...) · open · setPlacement() · innerHTML() · disabled · destroy() · onOpenChange。

picker: destroyed open: false