Awesome
@hoc-element/affix
📌 基于 Webpack 5 构建的 Vue 3.x 固钉组件，用于将页面元素固定在可视范围内
Try it Online ⚡️
Version
- Vue 3.x 版本 ｜ Vue 2.x 版本
Environment Support
- Vue 3.2.x
Install
npm install @hoc-element/affix
# or
pnpm add @hoc-element/affix
Quick Start
import { createApp } from 'vue'
import HocElementAffix from '@hoc-element/affix'
import App from './App.vue'
createApp(App)
.use(HocElementAffix)
.mount('#app')
Feature
- 支持 Vue 3.x
- 支持自定义顶部
offsetTop偏移量 - 支持固定状态改变触发回调
- 支持
Slot插槽式的固定状态反馈
Using
绑定参数 Attributes
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| offsetTop | （可选）距离窗口顶部多少时开始固定 | Number | 0 |
事件 Events
| 字段 | 说明 | 类型 |
|---|---|---|
| change | （可选）固定状态发生改变时的回调函数 | Function |
插槽数据 Slot
绑定的数据默认在一个对象里，如需要可直接解构再使用
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| affixed | （可选）实时的固定状态 | Boolean | false |
Example
下面是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： Code