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 🙏

© 2025 – Pkg Stats / Ryan Hefner

chao_coms

v1.0.4

Published

通用组件

Readme

需要设置
window._CONFIG['domianURL']   //接口请求地址
window._CONFIG['imgShowUrl']  //图片展示拼接地址
window._CONFIG['upFileUrl']  //文件上传地址

需要安装  axios tinymce 5.3.2  @tinymce/tinymce-vue 3.2.8

pubFn方法

//1. 已全局注册  使用 this.$pubFn.xxx
idCardInfo(获取身份证性别/年龄/生日)
debounce(防抖) 
absoUrl(绝对路径拼接)     
absoUrlArr(绝对路径拼接) 
arrObjRepeat(数组对象去重)               
deepClone(深度克隆数组或对象)
getByKeys(深层判断对象是否存在)
creatDrag(表格鼠标拖动滚动条)            
changeTableRowBg(点击兄弟元素 变背景)  
flatTree(扁平化数据 为树形结构)          
addTreeAttrs(自定义处理树形数据,需要单独定义)  
getItemByKey(得到树形数据中指定的对象)   
filterObj(过滤空对象)
randomArr(或得随机数组元素)              
randomNumber(获得指定区间随机数)
randomString(获取随机字符串)




/**
 * 取当前时间的间隔时间
 * @param {Int} number 时长
 * @param {String} type  返回类型
 * @param {String} cutStr  返回拼接格式(2021-01-20)
 * 
 * number <0 为前几天(周,月,年)  number > 0 为后几天(周,月,年) 
 * type为 day: number为天 (1代表 1天)
 * type为 week: number为周(1代表 7天)
 * type为 month: number为月(1代表 一个月)
 * type为 year: number为年 (1代表 一年)
 */
getDateDiff(number = 0, type = 'day',cutStr="-")
//详情参数说明
/*
函数防抖 无返回值
  fn(必须):执行函数 
  wait:等待时长(默认:300毫秒) 
  immediate:是否立即执行(默认:false)
*/
this.$pubFn.debounce(fn,wait,immediate);
//例:
window.addEventListener('resize',
  this.$pubFn.debounce(()=>{
  },500,false)
)

/*
文件绝对 单个 路径拼接 接受字符串, 返回字符串
依赖 window._CONFIG['imgShowUrl'];
url:需要拼接为绝对路径的 地址
*/
let url = "/a.png";
this.$pubFn.absoUrl(url);

/*
文件绝对路径拼接 接受数组,或者 字符串,返回数组
依赖 window._CONFIG['imgShowUrl'];
*/
let strOrArr = ["/a.png","/b.jpg"];
this.$pubFn.absoUrlArr(strOrArr);

/*
数组对象去重 返回去重后的数组对象
ArrObj: 数据源
key: 按什么条件去重(默认:'id')
*/
let ArrObj = [{id:1,name:'1'},{id:1,name:'2'}]
let key = "id";
this.$pubFn.arrObjRepeat(ArrObj,key);
//例:

/*
扁平化数据格式化为tree格式  返回拼接后树形结构
arrayList(必须): 扁平化数据源
pidStr: 根据字什么字段实现树形结构(默认: "parentId")
idStr:  当前项的那个字段去匹配父级 (默认:'id')
childrenStr: 子集的字段名称: (默认: 'children')
*/
let arrayList = [
  {id:"1",name:'1',parentId:'0'},
  {id:"2",name:'2',parentId:'1'}
];
this.$pubFn.flatTree(arrayList,pidStr,idStr,childrenStr)


/*
自定义处理树形数据 (需要单独使用) 返回处理完成的数据
list: 需要处理的树形结构
*/
addTreeAttrs(list){
  if(!(list instanceof Array)) return [];
  for (let item of list) {
    if(item.children){
      //vue-select-tree 树形自动展开所有
      item.isDefaultExpanded = true;
    }
    if (item.children instanceof Array) {
      this.addTreeAttrs(item.children);
    }
  }
}

/*
得到树形数组中指定的对象 返回匹配到的对象
list(必须):数据源, 
key(必须):需要匹配的唯一值, 
id:按哪个属性匹配(默认:'id')
*/
let list = [
  {id:"1",name:'1',parentId:'0'},
  {id:"2",name:'2',parentId:'1'}
];
let key = "2",id="id"
this.$pubFn.getItemByKey(list,key,id)

/*
过滤空对象 返回过滤后不为空的对象
obj: 对象源
*/
this.$pubFn.filterObj(obj)

/*
鼠标按住 拖动滚动条 无返回值
idOrClass: 拖动元素的id或者类名
*/
this.$pubFn.creatDrag(idOrClass);

/*
点击改变 元素 背景色,去除 其他兄弟元素背景  无返回值
idOrClass: 元素id,或者类名
activeClass: 点击选中的样式类名
*/
this.$pubFn.changeTableRowBg(idOrClass,activeClass)

// js常用方法 返回得到的数据
/*
获取随机字符串  返回获取的指定长度的随机字符串
length: 随机字符串的长度 (默认:6)
uuid: 是否为uuid格式 默认(false),
chats:指定随机字符串的内容 (默认: "0123456789qwertyuioplkjhgfdsazxcvbnm")
*/
this.$pubFn.randomString(length,uuid,chats)

/*
判断对象深层属性是否存在,存在返回对象值, 不存在返回 ''; (常用于不存在对象时报错问题)
obj: 对象源
keys: 格式:'a.b.c'
defVal: 不存在默认返回值 (默认: '')
*/
let obj = {a:{b:{c:"ccc"}}};
let key = "a.b.c";
this.$pubFn.getByKeys(obj,key,defVal)


this.$pubFn.randomArr(arr) //获取数组中随机位置的数
this.$pubFn.deepClone(arrOrObj) //克隆对象或者数组
this.$pubFn.randomNumber(min,max) //获取指定区间随机的数字

utils方法

//js公用函数 util

//1. 需要引入  xxx 为需要用到的方法名  
import {xxx} from '@/coms/plugin/pubFn/pubUtil.js'

//2.需要的组件使用
/*
手机号或身份证加密  返回加密后的值(String)
value(必须): 需要加密的值,
*/
telOrCardEncryption(value)

/*
计算两个时间相差 ,返回对象 {d,h,m,s}  天,时,分,秒
data(必须): 开始时间
now: 结束时间(默认:当前)
*/
timeDifference(data, now)

/**
取当前时间(前 后)的间隔时间, 返回时间格式的字符串
number 相隔时间(默认:0)
type  时间类型(默认: 'day')
cutStr  拼接格式(默认:'-')

number > 0 为前几天(周,月,年)  number < 0 为后几天(周,月,年) 
type为 day: number为天 (1代表 1天)
type为 week: number为周(1代表 7天)
type为 month: number为月(1代表 一个月)
type为 year: number为年 (1代表 一年)
*/
getDateDiff(number,type,cutStr)

pubVerify方法 (验证信息)