npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vpin

v1.1.1

Published

基于 vue 的钉子组件,把你的内容固定到屏幕中📌。

Downloads

11

Readme

vpin

npm version vue2 NPM downloads

介绍

基于 vue 的钉子组件,帮助你把内容固定到屏幕中 📌。

具体效果与功能

  • 核心功能就是把块固定于屏幕,滚动时不会随着内容滚动。
  • 支持动态计算定位,参照物默认为窗口。
  • 支持粘性定位,会根据范围对象开启固定效果。[^1]
  • 可选择基于css实现效果,性能消耗低和效果更好。

线上例子

如何安装

npm install -S vpin

引入项目

import Vue from "vue"
import vpin from "vpin"

Vue.use(vpin())

使用

<template>
    <section class="container">
        <header>
            <div class="brand"></div>
            <div class="account"></div>
        </header>
        <div class="inner">
            <nav>
              <!-- 根据容器范围开启定位,定位后需要保留原位置空位 -->
              <div class="nav" v-pin.sticky.cssEffect="{ container:'.inner>nav', top:0, left:0 }">
                <ul>
                  <li><a href="#学而篇">学而篇</a></li>
                  <li><a href="#为政篇">为政篇</a></li>
                  <li><a href="#里仁篇">里仁篇</a></li>
                </ul>
              </div>
            </nav>
            <div class="main">内容</div>
        </div>
        <!-- 页脚基于样式的定位作为参考,来进行后续滚动跟随。 -->
        <footer class="footer" v-pin.cssEffect="{bottom:0}">
          &copy; 2022 PackyTang
        </footer>
    </section>
</template>

包含属性(Props)

| 名称 | 限制 | 描述 | |--------------------------------------------------|-------------------|--------------------------------------------------------------------------------------------------------------------------------------| | v-pin.sticky | [Boolean] | 默认值为false,是否开启粘性定位效果,设置后开启。 | | v-pin.cssEffect | [Boolean] | 默认值为false,是否使用CSS效果代替动态计算,设置后开启。 开启后,默认搬运定位对象至body的行为会取消,定位对象的DOM结构不变。 | | v-pin="{ container:document.documentElement }" | [String, Element] | 范围对象,默认值为HTML DOM对象,范围对象用于计算生效范围,一般与粘性定位效果共同使用 。 | | v-pin="{ reference:document.documentElement }" | [String, Element] | 参照对象,默认值为HTML DOM对象,参照对象用于监听滚动事件,通过动态实现定位。滚动视窗不是浏览器窗口本身时,指定此对象可实现元素内滚动定位。 | | v-pin="{ top:0,left:0,right:0,bottom:0 }" | [Number] | 偏移量,默认值为Number.NaN。 |

例子1

使用CSS实现的使用粘性定位。✨推荐!

<template>
    <section class="container">
        <header>
            <div class="brand"></div>
            <div class="account"></div>
        </header>
        <div class="inner">
            <nav>
              <!-- 根据容器范围开启定位,定位后需要保留原位置空位 -->
              <div class="nav" v-pin.sticky.cssEffect="{ container:'.inner>nav', top:0, left:0 }">
                <ul>
                  <li><a href="#学而篇">学而篇</a></li>
                  <li><a href="#为政篇">为政篇</a></li>
                  <li><a href="#里仁篇">里仁篇</a></li>
                </ul>
              </div>
            </nav>
            <div class="main">内容</div>
        </div>
    </section>
</template>

例子2

使用CSS实现的固定至底部效果。

<template>
    <section class="container">
        <header>
            <div class="brand"></div>
            <div class="account"></div>
        </header>
        <div class="inner">
            <nav>
              <!-- 根据容器范围开启定位,定位后需要保留原位置空位 -->
              <div class="nav" v-pin.sticky="{ container:'.inner>nav', top:0, left:0 }">
                <ul>
                  <li><a href="#学而篇">学而篇</a></li>
                  <li><a href="#为政篇">为政篇</a></li>
                  <li><a href="#里仁篇">里仁篇</a></li>
                </ul>
              </div>
            </nav>
            <div class="main">内容</div>
        </div>
        <!-- 页脚基于样式的定位作为参考,来进行后续滚动跟随。 -->
        <footer class="footer" v-pin.cssEffect="{bottom:0}">
          &copy; 2022 PackyTang
        </footer>
    </section>
</template>

Develop

本地调试

$ npm run serve
# or
$ yarn serve

[^1]: 粘性定位见position: sticky;