Affix 固钉
将元素固定在特定可视区域。
基础用法
固钉组件默认固定在页面顶部。
你可以通过设置 offset 属性来改变距离顶部的偏移量,默认值为 0。
指定容器
你可以通过设置 target 属性,让固钉始终保持在容器内。 如果超出范围,它将被隐藏。
请注意,容器应避免出现滚动条。
固定位置
固钉组件提供了两个固定位置:top 和 bottom。
你可以设置 position 属性来改变固定位置,默认值为 top。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| offset | 偏移距离 | number | 0 |
| 位置 | 固钉位置 | 枚举 | 上 |
| target | 指定容器 (CSS 选择器) | string | — |
| z-index | 固钉的 z-index | number | 100 |
| teleported 2.13.0 | 固钉元素是否被 teleport。 如果为 true,它将被 teleport 到 append-to 设置的位置 | boolean | false |
| append-to 2.13.0 | 固钉元素附加到的元素 | CSSSelector / HTMLElement | body |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 固定状态改变时触发 | Function |
| scroll | 滚动时触发 | Function |
插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| update | 手动更新固钉状态 | Function |
| updateRoot | 更新 rootRect 信息 | Function |