https://github.com/pdsuwwz/hoc-element-affix

📌 Pin page elements within the visible range, built on Vue 3 + Webpack 5
https://github.com/pdsuwwz/hoc-element-affix

affix frontend hoc hoc-el-affix javascript pin vue vue-components vue2 vue3 webpack5

Last synced: 20 days ago
JSON representation

📌 Pin page elements within the visible range, built on Vue 3 + Webpack 5

• Host: GitHub
• URL: https://github.com/pdsuwwz/hoc-element-affix
• Owner: pdsuwwz
• License: mit
• Created: 2020-04-03T07:48:16.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-16T18:17:53.000Z (2 months ago)
• Last Synced: 2024-09-16T22:53:23.871Z (2 months ago)
• Topics: affix, frontend, hoc, hoc-el-affix, javascript, pin, vue, vue-components, vue2, vue3, webpack5
• Language: JavaScript
• Homepage: https://pdsuwwz.github.io/hoc-element-affix/
• Size: 1.03 MB
• Stars: 8
• Watchers: 3
• Forks: 3
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @hoc-element/affix

[![npm](https://img.shields.io/npm/v/@hoc-element/affix)](https://www.npmjs.com/package/@hoc-element/affix)

[![license](https://img.shields.io/npm/l/@hoc-element/affix)](https://github.com/pdsuwwz/hoc-element-affix/blob/main/LICENSE)

📌 基于 Webpack 5 构建的 Vue 3.x 固钉组件，用于将页面元素固定在可视范围内

**[💻 Live demo 在线体验](https://pdsuwwz.github.io/hoc-element-affix)** 

## Try it Online ⚡️

[StackBlitz](https://stackblitz.com/edit/github-vedset?file=src/views/ExampleAffix.vue)

[![stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-vedset?file=src/views/ExampleAffix.vue)

## Version

* Vue 3.x 版本 ｜ [Vue 2.x 版本](https://github.com/pdsuwwz/hoc-element-affix/tree/vue2.0)

## Environment Support

* Vue 3.2.x

## Install

```shell

npm install @hoc-element/affix

# or

pnpm add @hoc-element/affix

```

## Quick Start

```js

import { createApp } from 'vue'

import HocElementAffix from '@hoc-element/affix'

import App from './App.vue'

createApp(App)

  .use(HocElementAffix)

  .mount('#app')

```

## Feature

- [x] 支持 Vue 3.x

- [x] 支持自定义顶部 `offsetTop` 偏移量

- [x] 支持固定状态改变触发回调

- [x] 支持 `Slot` 插槽式的固定状态反馈

## Using

### 绑定参数 Attributes

| 字段 | 说明 | 类型 | 默认值 |

| -------- | -------- | -------- | -------- |

| offsetTop | （可选）距离窗口顶部多少时开始固定 | Number | 0 |

### 事件 Events

| 字段 | 说明 | 类型 |

| -------- | -------- | -------- |

| change | （可选）固定状态发生改变时的回调函数 | Function |

### 插槽数据 Slot

绑定的数据默认在一个对象里，如需要可直接解构再使用

| 字段 | 说明 | 类型 | 默认值 |

| -------- | -------- | -------- | -------- |

| affixed | （可选）实时的固定状态 | Boolean | false |

## Example

下面是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： [Code](https://github.com/pdsuwwz/hoc-element-affix/tree/main/example/src/views/ExampleAffix.vue )

## Deploy

见仓库 [📍  hoc-element-affix-build](https://github.com/pdsuwwz/hoc-element-affix-build)