vbg-ui

1.0.2 • Public • Published

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:参数删除的值

Package Sidebar

Install

npm i vbg-ui

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

4.42 MB

Total Files

232

Last publish

Collaborators

  • bughou123