跳转正文

YBackTop ​

适用范围:Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

定位 / Owner ​

YBackTop 监听指定 scroll owner,在阈值后提供返回顶部动作,并遵守 reduced-motion 偏好。

什么时候使用 ​

用于长 Drawer、权限树或工作区内部的明确滚动容器。

不什么时候使用 ​

页面没有独立 scroll owner 时不要传 window 替身;短内容无需显示。

Public API ​

props:target: HTMLElement | null、threshold(默认 240)。

Composition ​

宿主通过 template ref 提供实际滚动容器;组件只拥有可见性与 scrollTo 行为。

Anti-pattern ​

不要查询全局 class 寻找容器,也不要在 reduced-motion 下强制 smooth scroll。

Production Example ​

RolePermissionEditor 的长权限内容区直接消费它。

Live Workbench ​

/frontend-module-demo/component-workbench/back-top

Verification / Source ​

  • packages/yoyo-admin/admin-kit/src/ui/components/back-top/YBackTop.vue
  • component-productization-batch-2.spec.ts 与 RolePermissionEditor consumer

YoyoBoot · 从真实项目走向可复用能力