将页面元素固定在特定可视区域。
固钉默认固定在页面顶部。通过设置 offset 属性来改变吸顶距离，默认值为 0。
Tu View Plus<template>
<tu-affix :offset="120">
<tu-button>距离顶部120px</tu-button>
</tu-affix>
</template><template>
<tu-affix :offset="120">
<tu-button>距离顶部120px</tu-button>
</tu-affix>
</template>通过设置 target 属性，让固钉始终保持在容器内， 超过范围则隐藏。
<template>
<div class="affix-container">
<tu-affix target=".affix-container" :offset="120">
<tu-button>距离顶部120px</tu-button>
</tu-affix>
</div>
</template>
<style scoped>
.affix-container {
text-align: center;
height: 400px;
border-radius: 4px;
box-shadow: 0 2px 6px 0 var(--vp-c-divider);
}
</style><template>
<div class="affix-container">
<tu-affix target=".affix-container" :offset="120">
<tu-button>距离顶部120px</tu-button>
</tu-affix>
</div>
</template>
<style scoped>
.affix-container {
text-align: center;
height: 400px;
border-radius: 4px;
box-shadow: 0 2px 6px 0 var(--vp-c-divider);
}
</style>组件提供 2 个固定的位置参数 top 和 bottom。通过设置 position 属性来改变固定位置，默认值为 top。
<template>
<tu-affix position="bottom" :offset="20">
<tu-button>距离底部20px</tu-button>
</tu-affix>
</template><template>
<tu-affix position="bottom" :offset="20">
<tu-button>距离底部20px</tu-button>
</tu-affix>
</template>| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| offset | 偏移距离 | Number | 0 |
| position | 位置 | String | 'top' |
| target | 指定容器 (CSS 选择器) | String | - |
| z-index | z-index | Number | 100 |
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | fixed 状态改变时触发的事件 | Function |
| scroll | 滚动时触发的事件 | Function |
| 参数名 | 描述 |
|---|---|
| default | 自定义默认内容 |