Affix 固钉

将页面元素固定在特定可视区域。

import { createApp } from 'vue'
import { ElAffix } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElAffix)

基础用法

固钉默认固定在页面顶部，通过 offset 属性调整吸顶距离，默认值为 0。

指定容器

通过设置 target 属性，让固钉始终保持在容器内，超过范围则隐藏。请注意容器避免出现滚动条。

固定位置

Affix 组件提供 top 和 bottom 两种固定位置，通过 position 属性切换，默认值为 top。

监听状态变化

通过 change 事件可以在固钉的固定状态改变时得到通知。

API

Affix Attributes

属性名	说明	类型	默认值
offset	偏移距离	number	0
position	固钉位置	top | bottom	top
target	指定容器（CSS 选择器）	string	—
z-index	z-index 层级	number	100

Affix Events

事件名	说明	参数
change	固钉状态改变时触发	(fixed: boolean)
scroll	滚动时触发	({ scrollTop, fixed })

Affix Slots

插槽名	说明
default	自定义默认内容

更多示例请参考 Element Plus Affix 文档。