New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vbg-ui

基于vue3版本的UI组件库

1.0.2
latest
Version published
Maintainers
1
Created

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

FAQs

Package last updated on 26 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts