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

vbg-ui

v1.0.2

Published

基于vue3版本的UI组件库

Downloads

2

Readme

BG-UI:一个基于web端的UI组件库

bgButton:一个按钮UI

props:

参数名 |是否必填 |默认值 |作用 |选项 size |否 |small |UI组件的大小 |small|mini|medium value |否 |无 |值 |String backgrond |否 |无 |背景颜色 |color color |否 |无 |字体颜色 |color disabled |否 |false |是否可以选中 |Boolean loading |否 |false |是否为加载状态 |Boolean type |否 |rect |按钮的形状 |rect|smallArc|arc|circle type |否 |rect |按钮的形状 |rect|smallArc|arc|circle border-color|否 |无 |边框颜色 |color font-size |否 |无 |字体大小 |string circle |否 |false |是否为圆形按钮 |Boolean width |否 |无 |按钮的宽度 |string height |否 |无 |按钮的高度 |string

event: bgClick:点击事件,参数:event

=======================================================================================

bgCalander:一个日历UI

props:

参数名 |是否必填 |默认值 |作用 |选项 title |否 |日历 |日历的title |String formate |否 |YYYY-MM-DD |格式日期 |String width |否 |无 |按钮的宽度 |string height |否 |无 |按钮的高度 |string border-color|否 |无 |边框颜色 |color font-size |否 |无 |字体大小 |string backgrond |否 |无 |背景颜色 |color color |否 |无 |字体颜色 |color

event: bgClick:点击事件,参数:获取所有点击日期的数组

bgInput:一个输入框UI

props:

参数名 |是否必填 |默认值 |作用 |选项 title |否 |日历 |日历的title |String value |否 |value值 |绑定到input中的值 |String size |否 |small |input宽的大小 |mini|small|medium captcha |否 |false |是否为验证码 |Boolean type |否 |text |输入框的类型 |text|password|email.... placeholder |否 |无 |placeholder值 |string clear |否 |false |是否包含清空按 |Boolean password |否 |false |是否可以查看密码 |Boolean list |否 |false |展示的列表 |Boolean|Array width |否 |无 |按钮的宽度 |string height |否 |无 |按钮的高度 |string border-color|否 |无 |边框颜色 |color font-size |否 |无 |字体大小 |string backgrond |否 |无 |背景颜色 |color color |否 |无 |字体颜色 |color

event: bgClick:点击事件,当设置的title的值才有效 v-model:可以用来绑定输入框的值 liClick:list设置有值才生效,参数:获取点击对应的value值

===============================================================================

bgScroll:一个滑动UI

props:

参数名 |是否必填 |默认值 |作用 |选项 scrollX |否 |false |滑动方向(纵) |Boolean scrollEvent |否 |false |监听滑动事件 |Boolean pullingUp |否 |false |监听上拉事件 |Boolean pullingDown |否 |false |监听下拉事件 |Boolean scrollStart |否 |false |监听开始滚动事件 |Boolean scrollEnd |否 |false |监听结束滚动事件 |Boolean mouseWheel |否 |false |是否使用滚轮滑动 |Boolean loading |否 |false |是否使用加载动画 |Boolean width |否 |无 |按钮的宽度 |string height |否 |无 |按钮的高度 |string font-size |否 |无 |字体大小 |string backgrond |否 |无 |背景颜色 |color color |否 |无 |字体颜色 |color containerWidth|否 |无 |内容宽度(只有横向时才有效) |String loadingColor |否 |无 |加载颜色(只有loading为true时才有效) |String

event: pullingUp:上拉 pullingDown:下拉 scrolling:滑动 scrollStart:滑动开始 scrollEnd:滑动结束

bgSwiper:一个轮播UI

props:

参数名 |是否必填 |默认值 |作用 |选项 autoplay |否 |true |自动轮播 |Boolean duration |否 |3000 |轮播持续时间 |String initial |否 |0 |第一个显示 |Number hasDot |否 |false |是否有指示点 |Boolean(可以重写) hasNav |否 |false |是否有切换 |Boolean color |否 |false |颜色 |String width |否 |无 |按钮的宽度 |string height |否 |无 |按钮的高度 |string backgrond |否 |无 |背景颜色 |color navColor |否 |false |切换器颜色 |color navWidth |否 |无 |切换器按钮的宽度 |string navHeight |否 |无 |切换器按钮的高度 |string navBackgrond|否 |无 |切换器背景颜色 |color navFontSize |否 |无 |切换器字体大小 |String itIcon |否 |无 |切换器样式(iconfont)|String ltIcon |否 |无 |切换器样式(iconfont)|String

event: dotChange:点切换是触发(用于自定义指示点)

bgSwiperItem:存放一个组件(必须要写key,并且key值为当前的对应的第几个组件)

要修改指示点,使用具名插槽(dots),并且必须要传递initial参数,和监听dotChange事件

===========================================================================================

bgCheckBox:一个多选/单选UI

props:

参数名 |是否必填 |默认值 |作用 |选项 labelValue |是 |无 |要显示的值 |String icon |否 |图标 |底层图标 |String selectColor |否 |图标 |选中的图标(重叠) |String color |否 |无 |字体颜色 |color selectColor |否 |无 |选中的字体颜色 |color disabled |否 |false |是否无法选中 |Boolean checked |否 |false |是否选中 |Boolean isRadio |否 |false |是否单选框 |Boolean name |否 |无 |input中的name |string size |否 |无 |大小 |small|mini|medium font-size |否 |无 |字体大小 |string width |否 |无 |按钮的宽度 |string height |否 |无 |按钮的高度 |string border-color|否 |无 |边框颜色 |color font-size |否 |无 |字体大小 |string backgrond |否 |无 |背景颜色 |color color |否 |无 |字体颜色 |color

event: v-model

===========================================================================================

bgSwitch:一个switch UI

props:

参数名 |是否必填 |默认值 |作用 |选项 ltValue |否 |无 |右边要显示的值 |String rtValue |否 |无 |左边要显示的值 |String size |否 |无 |大小 |small|mini|medium initial |否 |false |初始位置 |Boolean ltColor |否 |图标 |右边要显示的图标 |String rtColor |否 |图标 |左边要显示的图标 |String color |否 |无 |字体颜色 |color silderColor |否 |无 |滑块的颜色 |color backgrond |否 |无 |背景颜色 |color

event: v-model

bgSelect:一个选择框 UI

props:

参数名 |是否必填 |默认值 |作用 |选项 isCheck |否 |false |是否可以多选 |Boolean list |是 |[] |可选择的值 |Array size |否 |无 |大小 |small|mini|medium initial |否 |无 |初始值 |String width |否 |无 |按钮的宽度 |string color |否 |无 |字体颜色 |color border-color|否 |无 |边框颜色 |color backgrond |否 |无 |背景颜色 |color

event: select:选择的值 remove:参数删除的值

bgRate:一个评分 UI

props:

参数名 |是否必填 |默认值 |作用 |选项 amount |否 |5 |最高分数 |number active |否 |4 |分数 |number size |否 |无 |大小 |small|mini|medium icon |否 |无 |图标 |String activeIcon |否 |无 |活跃图标 |String width |否 |无 |按钮的宽度 |string color |否 |无 |字体颜色 |color activeColor |否 |无 |活跃字体颜色 |color

event: select:选择的值 remove:参数删除的值