npm i vue3-scroll-spy -S
或者
yarn add vue3-scroll-spy
支持包 | 版本 |
---|---|
Vue | 3+ |
// 在 main.js 全局注册
import { registerScrollSpy } from 'vue3-scroll-spy';
const app = createApp(App)
// 使用默认配置
registerScrollSpy(app)
// 或者使用自定义配置
registerScrollSpy(app, options)
app.mount('#app')
<ul v-scroll-spy-active v-scroll-spy-link>
<li>
<a>Menu 1</a>
</li>
<li>
<a>Menu 2</a>
</li>
</ul>
<div v-scroll-spy>
<div>
<h1>Header 1</h1>
<p>Content</p>
</div>
<div>
<h1>Header 2</h1>
<p>Content</p>
</div>
</div>
把 scroll-spy 绑定到一个盒子的元素之中。
Directive 名 | 描述 | 默认值 |
---|---|---|
v-scroll-spy="{allowNoActive: true}" |
启动后当滑动超出盒子的范围外,active 状态就会消失 | 默认保持至少一个元素拥有 active 状态 |
v-scroll-spy="{offset: 50}" |
给 scroll 和 active 元素添加 offset | 默认: 0 |
v-scroll-spy="{time: 200, steps: 30}" |
设置动画的时常和动画的 step | {time: 200, steps: 30} |
可设置 active 元素的 selector
和 class
属性。
Directive 名 | 描述 | 默认值 |
---|---|---|
v-scroll-spy-active="{selector: 'li.menu-item', class: 'custom-active'}" |
自定义元素的选择器和 class 名 | {selector: null, class: 'active'} |
给所有元素的子元素添加 click
点击时间,让点击菜单的时候页面滑动到对应的区域。
Directive 名 | 描述 | 默认值 |
---|---|---|
v-scroll-spy-link="{selector: 'a.menu-link'}" |
自定义菜单的选择器 | {selector: null, class: 'active'} |
import { registerScrollSpy, Easing } from '@/directives/ScrollSpy'
const app = createApp(App)
// or custom global options
registerScrollSpy(app, {
easing: Easing.Cubic.In
})
app.mount('#app')
v-scroll-spy
,v-scroll-spy-active
,v-scroll-spy-link
需要拥有相等的子元素,才能让这个 directive 正常运作。- 如果需要在多个盒子中使用 scroll-spy directive,那就需要在每一个绑定了
v-scroll-spy
元素盒子上添加data-scroll-spy-id=""
。
Vue3 Scroll-Spy 也支持嵌套菜单:
<ol
v-scroll-spy
v-scroll-spy-active="{selector: 'li.menu-item', class: 'active'}"
>
<li class="menu-item">Item 1</li>
<li class="menu-item">
Item 2
<ol>
<li class="menu-item">Item 2.1</li>
<li class="menu-item">Item 2.2</li>
</ol>
</li>
</ol>
MIT License