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

kitao

v1.2.0

Published

``` <k-input v-model="input" label="label" required/> <!-- errors: 需要校验时,报错提示, 类型Array --> <!-- required: 是否必填项,Boolean类型,默认false --> <!-- submitted 是否点击提交或者校验按钮,Boolean类型,默认false --> <!-- showLabel 是否显示label标签,Boolean类型,默认true --> <!-- disabled 是否有效,Boo

Downloads

37

Readme

input框使用

<k-input v-model="input" label="label" required/>
<!-- errors: 需要校验时,报错提示, 类型Array -->
<!-- required: 是否必填项,Boolean类型,默认false -->
<!-- submitted 是否点击提交或者校验按钮,Boolean类型,默认false -->
<!-- showLabel 是否显示label标签,Boolean类型,默认true -->
<!-- disabled  是否有效,Boolean类型,默认false -->
<!-- type input类型, String类型,默认text, 支持原生所有的input的type -->
<!-- append 后置内容 -->
<!-- prepend 前置内容 -->
<!-- placeholder  String类型,默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- @change事件 -->

select框使用

<k-select v-model="input" label="label" options="options"/>
<!-- errors: 需要校验时,报错提示, 类型Array -->
<!-- attr: 类型Object, 当options的内容,不是用label,value时,用attr做映射,例如,数组传的是[{name: 'xxx', id: 'xxxx'}], attr ={label: 'name',value: 'id'} -->
<!-- options:数组,格式为 options = [{label: 'label1',value: 'value1}] -->
<!-- required: 是否必填项,Boolean类型,默认false -->
<!-- submitted 是否点击提交或者校验按钮,Boolean类型,默认false -->
<!-- showLabel 是否显示label标签,Boolean类型,默认true -->
<!-- disabled  是否有效,Boolean类型,默认false -->
<!-- placeholder  String类型,默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- @change事件 -->

k-search 带有搜索功能的下拉框

<k-search v-model="value" :options="options">
<!-- options:数组,格式为 options = [{label: 'label1',value: 'value1}] -->
<!-- attr: 类型Object, 当options的内容,不是用label,value时,用attr做映射,例如,数组传的是[{name: 'xxx', id: 'xxxx'}], attr ={label: 'name',value: 'id'} -->
<!-- errors: 需要校验时,报错提示, 类型Array -->
<!-- required: 是否必填项,Boolean类型,默认false -->
<!-- submitted 是否点击提交或者校验按钮,Boolean类型,默认false -->
<!-- showLabel 是否显示label标签,Boolean类型,默认true -->
<!-- disabled  是否有效,Boolean类型,默认false -->
<!-- placeholder  String类型,默认: 请输入-->
<!-- onlyShowName:  Boolean类型, 下拉框列表是否仅显示options中的label字段,默认true,如传false,则显示 label_vale的格式-->

textarea框

<k-textarea v-model="textarea" label="label"/>
<!-- errors: 需要校验时,报错提示, 类型Array -->
<!-- required: 是否必填项,Boolean类型,默认false -->
<!-- submitted 是否点击提交或者校验按钮,Boolean类型,默认false -->
<!-- showLabel 是否显示label标签,Boolean类型,默认true -->
<!-- disabled  是否有效,Boolean类型,默认false -->
<!-- placeholder  String类型,默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- @change事件 -->

分页

<k-pagination  :page="page" @handleCurrentChange/>
<!-- page: {current: 1, size: 10, total: 1}  current: 当前页, size:多少条数据, total:总共-->
<!-- @handleCurrentChange   current切换,size切换后的回调事件-->

loading框

<k-loading  v-if="show"/>
<!-- show: 控制loading 的显示与隐藏-->

kPickr

<k-pickr v-model="value">
<!-- errors: 需要校验时,报错提示, 类型Array -->
<!-- required: 是否必填项,Boolean类型,默认false -->
<!-- submitted 是否点击提交或者校验按钮,Boolean类型,默认false -->
<!-- showLabel 是否显示label标签,Boolean类型,默认true -->
<!-- disabled  是否有效,Boolean类型,默认false -->
<!-- placeholder  String类型,默认: 请输入-->
<!-- maxLength  长度限制。 默认 20 -->
<!-- dateFormat,事件格式化,string类型, 默认:"Y/m/d",比如2023/4/27 -->
<!-- locale 多语言,默认获取缓存的值 其次浏览器的默认语言,支持中:zh-cn,英:en,韩:ko-kr-->