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

twformcomp

v0.0.29

Published

this is a test comp

Downloads

97

Readme

说明文档

该组件为项目提供了一些常用的方法,组件,样式。

指令操作

npm/cnpm i
依赖包下载

npm run serve
启动开发环境

npm run build
打包正式环境

npm run test
打包测试环境

组件库说明

公共方法

1、changeDate(time, type) //时间格式化
    参数说明:
    time:传入的时间
    type:格式化后返回的格式
        默认:2020-01-01
        date2:20200101
        dataTime :2020-01-01 01:01:01
        month :2020-01
        month2 :202001
---后续根据项目需求会加入更多格式---

2、changeNum(num,changeType) //数字格式化
    参数说明:
    num:传入的数字
    changeType:格式化后返回的格式
        默认:保留2位小数
        tofixed3:保留三位小数
        comma :保留2位小数,正数部分添加百分号 //10,000.00
        comma3 :保留3位小数,正数部分添加百分号 
        percent :保留两位添加百分号
---后续根据项目需求会加入更多格式---

3、sortFunc(arr,word,type) //数组对象的排序
    参数说明:
    arr:传入的数组
    word:按照对象中的某个字段排序(字段值为可以比较大小的内容,比如时间或数字)
    type:排序规则
        默认:正序
        任意值:倒序

4、urlSearch(name) //获取路由中的参数
    参数说明:
    name:参数名

公共样式

仅仅提供一些简单的样式
.twBorder     //添加线条
.twBorder-b   //添加底部线条

.twEllipsis   //文字超过1行后结尾截断并出现...
.twEllipsis2  //文字超过2行
.twEllipsis3  //文字超过3行

.twRadius     //圆角弧度5px
.twRadius10   //圆角弧度10px

.twBtnForm    //表单按钮样式
.twBtnBasic   //基础按钮样式

//flex布局样式
.twFlex  
.twFlex-between
.twFlex-around
.twFlexCo
.twFlexCo-between
.twFlexCo-around

......未完待续

公共组件

1、表单
 <twForm :formData="data" @getParamsData="func"></twForm>
    参数说明:
    func://点击表单中的保存按钮后,会在此方法中返回表单所填数据。
    data:{
        title:'表单名',
        id:'表单id',
        formList:[//构建表单数据
            {name:'放养日期',value:'',valueName:'breedDate',require:true,placeholder:'请输入年限',type:'selectDate'},
            {name:'放养品种',showName:'',value:'',valueName:'breedVarietyCode',placeholder:'请选择品种',type:'selectMore',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
            {name:'品种分类',showName:'',value:'',valueName:'varietyClassifyCode',require:true,placeholder:'请选择分类',type:'selectOne',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
            {name:'放养重量',value:'',valueName:'breedWeight',require:true,placeholder:'请输入重量',type:'number',unit:'kg',tofixed:3,blur:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
            {name:'放养数量',value:'',valueName:'breedNumber',require:true,placeholder:'请输入数量',type:'tel',unit:'尾',blur:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
            {name:'放养规格',value:'',valueName:'breedSpecification',require:true,placeholder:'自动计算',type:'number',unit:'克/尾',tofixed:1,readonly:true},
            {name:'单价',value:'',valueName:'price',require:true,placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
            {name:'总金额',value:'',valueName:'totalMoney',placeholder:'自动计算',type:'number',unit:'元',readonly:true,tofixed:2},
            {name:'备注',value:'',valueName:'remark',type:'textarea',limit:200,placeholder:'请输入备注'},
            {name:'模块ID',value:'',valueName:'pkId',isHidden:true},
            {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
        ]
    }
    
    formList参数说明:
        name:label名字。
        showName:单选或者多选时,选中后需要展示的文案。
        value:传给后台的value值。多选时,value为选中的数组对象
        valueName:传给后台的key。
        require:true为必填。
        type:输入框类型//text,tel,number,selectDate,selectMore,selectOne,textarea。
        list:type为selectMore,selectOne时,弹出框的内容。
        tofixed:type为number时,小数位数保留X位。
        limit:type为textarea时,内容字数限制以及右下角的字数实时展示。
        readonly:是否可填。
        isHidden:是否隐藏该项。
        unit:该项单位。
        
        blur:该字段将会与blurContact中的字段进行相加复制到blurResult字段中。
        blurContact:
        blurResult:
        
        ggContact://如果blur的这个字段会联动2次加法计算,就要启动该字段,值为[本身的valueName,'关联的另一个字段'],会计算[]中的2个字段并复制给ggResult中的字段中。
        ggResult: