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

vue-amaze-scrollspy

v1.0.2

Published

vue vue-directive animation

Downloads

4

Readme

  • babel
  • eslint

打包发布npm

使用工具库lodash

vue指令的hook callback

  • bind: 只调用一次,指令第一次绑定到元素时调用,可进行一次性到初始化设置
  • inserted: 被绑定元素插入父节点时调用
  • update:所在组件的VNode更新调用,
  • componentUpdated: 指令所在的VNode及其子组件VNode全部更新后调用
  • unbind: 只调用一次,指令与元素解绑时调用(怎么解绑)

intersectionObserverg构造函数 阮一峰的使用教程

  • 浏览器原生提供的构造函数,构造函数接受两个参数:callback,
    • 参数callback(entries, option)
    • 一般会触发两次: 1.被观察目标进入视口时触发 2. 被观察目标完全离开视口时触发
    • 参数entries是一个数组,每个成员都是一个IntersectionObserverEntry对象,
    • entries数组里面的成员是怎么生成的: 如果同时有两个被观察的对象的可见性发生变化,entries数组就会有两个成员
    • IntersectionObserverEntry对象
    • target: 被观察的目标元素
    • rootBounds: 根元素的矩形区域信息
    • boundingClientRect: 目标元素的矩形区域信息
    • intersectionRect: 目标元素与视口(或根元素)的交叉区域的信息
    • intersectionRatio: 目标元素的可见比例,即intersectionRect / boundingClientRect,完全可见:1, 不可见: 0
    • 参数 Option对象
    • threshold: 规定了一个监听目标与边界交叉区域的比例值,决定了什么时候触发回掉函数,
      • 可以是具体的数值
      • 0.0 - 1.0之间的数组
    • root: 指定目标元素所在容器节点(即跟元素)
    • rootMargin: 跟元素的margin属性,用了扩大目标元素与根元素的交叉区域
  • 实例方法
    • observe(dom元素) 开始观察一个对象
    • unobserve(element) 停止观察
    • disconnect() 关闭观察器